Angular中未修改值时ValueChanges为何触发？NG0100错误求助

针对你遇到的弹窗中mat-datepicker多次打开后触发NG0100: Expression has changed after it was checked错误，以及未修改内容却触发valueChanges的问题，可通过以下几种方式解决：

1. 增加值变化判断，避免无意义执行逻辑 #

valueChanges可能因控件内部状态重置（比如弹窗重复打开时的初始化操作）触发，即便实际值未改变。在订阅时对比新旧值，仅当值真的变化时才执行业务逻辑：

ngAfterViewInit() {
  this.range.get('start').valueChanges.subscribe((newValue, oldValue) => {
    if (newValue !== oldValue) {
      this.updateFormattedDates();
      this.changeDetectorRef.markForCheck(); // 替换detectChanges，避免干扰检测周期
    }
  });

  this.range.get('end').valueChanges.subscribe((newValue, oldValue) => {
    if (newValue !== oldValue) {
      this.updateFormattedDates();
      this.changeDetectorRef.markForCheck();
    }
  });
}

2. 管理订阅生命周期，避免重复订阅 #

弹窗组件若被复用或多次创建，未清理的valueChanges订阅会累积，导致多次触发。使用takeUntil操作符在组件销毁时自动取消订阅：

import { Subject, takeUntil } from 'rxjs';

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

ngAfterViewInit() {
  this.range.get('start').valueChanges
    .pipe(takeUntil(this.destroy$))
    .subscribe((newValue, oldValue) => {
      if (newValue !== oldValue) {
        this.updateFormattedDates();
        this.changeDetectorRef.markForCheck();
      }
    });

  this.range.get('end').valueChanges
    .pipe(takeUntil(this.destroy$))
    .subscribe((newValue, oldValue) => {
      if (newValue !== oldValue) {
        this.updateFormattedDates();
        this.changeDetectorRef.markForCheck();
      }
    });
}

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

3. 避免手动调用detectChanges，改用markForCheck #

detectChanges会立即触发变更检测，若在Angular的检测周期外调用，容易引发NG0100错误。markForCheck只是标记组件需要在下一个检测周期更新，不会干扰当前周期，更符合Angular的变更检测机制。

4. 延迟订阅或在弹窗打开时初始化 #

如果弹窗通过MatDialog实现，可在弹窗打开事件中才订阅valueChanges，避免组件初始化时的不必要触发：

import { takeUntil } from 'rxjs';

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

constructor(private dialogRef: MatDialogRef<YourDialogComponent>) {}

ngOnInit() {
  this.dialogRef.afterOpened().subscribe(() => {
    this.range.get('start').valueChanges
      .pipe(takeUntil(this.destroy$))
      .subscribe((newValue, oldValue) => {
        if (newValue !== oldValue) {
          this.updateFormattedDates();
        }
      });

    this.range.get('end').valueChanges
      .pipe(takeUntil(this.destroy$))
      .subscribe((newValue, oldValue) => {
        if (newValue !== oldValue) {
          this.updateFormattedDates();
        }
      });
  });
}

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

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