Angular 13中如何在*ngIf移除元素前执行代码？

核心问题在于：*ngIf销毁DOM元素时，对应的表单控件并未从表单组中移除，且之前设置的验证规则依然生效，导致表单持续校验已不可见的控件，引发错误。以下是几种直接可行的解决方法：

方法一：切换选项时主动管理验证规则（最直接） #

不需要依赖元素销毁事件，在searchOption的valueChanges订阅中，直接对将要隐藏的控件清除验证、重置值，并更新表单状态；对将要显示的控件添加验证规则。

示例代码：

ngOnInit() {
  this.searchOption.valueChanges.subscribe(selected => {
    const recruiterCtrl = this.formGroup.get('recruiter');
    const codeRequestCtrl = this.formGroup.get('codeRequest');

    if (selected === 'Recruiter') {
      // 处理即将隐藏的codeRequest控件
      codeRequestCtrl?.clearValidators();
      codeRequestCtrl?.reset();
      codeRequestCtrl?.updateValueAndValidity({ emitEvent: false });

      // 处理即将显示的recruiter控件
      recruiterCtrl?.setValidators([Validators.required]);
      recruiterCtrl?.updateValueAndValidity({ emitEvent: false });
    } else if (selected === 'Code') {
      // 处理即将隐藏的recruiter控件
      recruiterCtrl?.clearValidators();
      recruiterCtrl?.reset();
      recruiterCtrl?.updateValueAndValidity({ emitEvent: false });

      // 处理即将显示的codeRequest控件
      codeRequestCtrl?.setValidators([Validators.required]);
      codeRequestCtrl?.updateValueAndValidity({ emitEvent: false });
    }
  });
}

updateValueAndValidity({ emitEvent: false })用于避免触发新一轮的valueChanges订阅，防止循环触发。

方法二：自定义指令监听元素销毁（针对DOM/组件销毁场景） #

如果需要在元素销毁时执行逻辑，可以自定义一个指令，利用Angular的OnDestroy钩子触发销毁事件，无论是原生div还是PrimeNG组件都适用。

步骤1：创建自定义指令 #

import { Directive, Output, EventEmitter, OnDestroy } from '@angular/core';

@Directive({
  selector: '[elementDestroy]'
})
export class ElementDestroyDirective implements OnDestroy {
  @Output() elementDestroyed = new EventEmitter<void>();

  ngOnDestroy(): void {
    this.elementDestroyed.emit();
  }
}

步骤2：在模板中使用指令 #

<p-dropdown formControlName="searchOption" [options]="options"></p-dropdown>

<div *ngIf="searchOption.value === 'Recruiter'" (elementDestroyed)="onRecruiterDestroy()">
  <input pInputText formControlName="recruiter" placeholder="Recruiter" />
</div>

<div *ngIf="searchOption.value === 'Code'" (elementDestroyed)="onCodeDestroy()">
  <input pInputText formControlName="codeRequest" placeholder="Code Request" />
</div>

步骤3：组件中处理销毁事件 #

onRecruiterDestroy() {
  const ctrl = this.formGroup.get('recruiter');
  ctrl?.clearValidators();
  ctrl?.reset();
  ctrl?.updateValueAndValidity({ emitEvent: false });
}

onCodeDestroy() {
  const ctrl = this.formGroup.get('codeRequest');
  ctrl?.clearValidators();
  ctrl?.reset();
  ctrl?.updateValueAndValidity({ emitEvent: false });
}

方法三：改用[hidden]替代*ngIf（备选方案） #

如果业务允许，可以用[hidden]代替*ngIf，这样元素不会被销毁，只是隐藏。但需要注意：[hidden]的元素依然在DOM中，表单控件始终存在，需要在切换时同样管理验证规则，避免无效校验。

示例：

<div [hidden]="searchOption.value !== 'Recruiter'">
  <input pInputText formControlName="recruiter" placeholder="Recruiter" />
</div>

<div [hidden]="searchOption.value !== 'Code'">
  <input pInputText formControlName="codeRequest" placeholder="Code Request" />
</div>

内容的提问来源于stack exchange，提问作者Claudio Torres