Angular5下拉框触发弹窗遇ExpressionChangedAfterItHasBeenCheckedError求优化方案

这个问题我之前也碰到过！本质上是因为Angular的变更检测机制：在当前检测周期已经完成后，你的代码又触发了状态变更（这里是表单控件的ng-untouched状态从true变成false），导致Angular抛出这个错误。你的临时方案虽然有效，但确实有点繁琐，这里有几个更优雅的解决办法：

方案一：用setTimeout延迟模态框打开到下一个变更检测周期 #

把打开模态框的操作放到setTimeout里，这样代码会在当前Angular变更检测周期完全结束后执行，就不会触发检测后的状态变更错误：

controle.valueChanges.subscribe(value => {
  if (value === 'SOME_EQUALS') {
    // 利用setTimeout将操作推到下一个宏任务，避开当前检测周期
    setTimeout(() => {
      this.modalService.open<SomeModalComponent>(SomeModalComponent);
    });
  }
});

这个方案最简单，不需要额外依赖ChangeDetectionRef，代码也更简洁。

方案二：用Promise.resolve()在微任务中执行 #

如果不想用宏任务的setTimeout，可以用微任务来实现同样的效果，执行时机比宏任务更早：

controle.valueChanges.subscribe(value => {
  if (value === 'SOME_EQUALS') {
    Promise.resolve().then(() => {
      this.modalService.open<SomeModalComponent>(SomeModalComponent);
    });
  }
});

原理和setTimeout一致，都是让模态框的打开操作避开当前的变更检测周期，避免Angular检测到周期内的状态不一致。

方案三：提前同步表单控件状态并手动触发检测 #

如果想从根源解决状态变更的问题，可以在打开模态框前手动设置控件的touched状态，并触发一次变更检测，让Angular提前感知到这个变化：

controle.valueChanges.subscribe(value => {
  if (value === 'SOME_EQUALS') {
    // 提前将控件标记为touched，同步状态
    controle.markAsTouched();
    // 手动触发一次变更检测，让Angular更新视图状态
    this.cdr.detectChanges();
    
    this.modalService.open<SomeModalComponent>(SomeModalComponent);
  }
});

这个方案适合你想明确控制表单状态变更时机的场景，避免后续意外的状态变化。

另外提醒一下：记得在组件销毁时取消valueChanges的订阅，避免内存泄漏，比如用takeUntil操作符：

import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

private destroy$ = new Subject<void>();

ngOnInit() {
  controle.valueChanges.pipe(
    takeUntil(this.destroy$)
  ).subscribe(value => {
    // 你的逻辑
  });
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

内容的提问来源于stack exchange，提问作者data.firstName