Angular@Output传值报ExpressionChangedAfterItHasBeenCheckedError

这个报错和@Output的写法规范无关，是Angular变更检测机制和DevExtreme组件事件触发时序共同导致的：

• Angular开发模式下，每轮变更检测完成、所有视图绑定值更新结束后，会执行一次二次校验，如果此时发现有绑定值被改动，就会抛出ExpressionChangedAfterItHasBeenCheckedError。这个校验只在开发环境生效，目的是提前暴露数据和视图不同步的问题，生产环境不会抛错，但对应的时序问题依然可能造成视图渲染异常。
• DevExtreme DataGrid的onSaved事件是组件内部原生触发的回调，没有被Angular的Zone.js接管，触发时点刚好落在Angular当轮变更检测完成后的校验窗口内。此时你通过emit通知父组件修改count值，就会被二次校验捕获为非法变更。普通原生事件（如click、input）触发时不会有这个问题，是因为这类事件已经被Zone.js打了补丁，触发时会自动启动合法的变更检测流程。

按推荐优先级从高到低排列：

• 方案1：将更新逻辑纳入Angular Zone管控（最稳妥，无副作用）
  子组件中注入NgZone，把emit逻辑包裹在ngZone.run中执行，强制状态更新触发合法的变更检测流程，不会触发校验报错：

  import { Component, Output, EventEmitter, NgZone } from '@angular/core';
  
  @Component({
    selector: 'app-child',
    // 子组件其余配置
  })
  export class ChildComponent {
    @Output() onCountUpdateEvent: EventEmitter<number> = new EventEmitter<number>();
    
    constructor(private ngZone: NgZone) {}
  
    // dx-data-grid绑定的onSaved回调
    onGridSaved() {
      // 其余grid保存后的业务逻辑
      this.ngZone.run(() => {
        this.onCountUpdateEvent.emit(4);
      });
    }
  }
  

• 方案2：父组件更新值后手动触发变更检测
  父组件注入ChangeDetectorRef，更新count后主动调用检测方法同步视图，消除校验冲突：

  import { Component, ChangeDetectorRef } from '@angular/core';
  
  @Component({
    selector: 'app-parent',
    template: '<app-child (onCountUpdateEvent)="onCountUpdate($event)"></app-child>'
  })
  export class ParentComponent {
    count = 0;
  
    constructor(private cdr: ChangeDetectorRef) {}
  
    onCountUpdate(count: number) {
      this.count = count;
      this.cdr.detectChanges();
    }
  }
  

• 方案3：将更新逻辑延后到下一个事件循环执行
  用setTimeout包裹emit逻辑，把状态更新推到当前变更检测周期结束后再执行，绕开校验窗口。这个方案写法最简单，适合对时序要求不高的场景：

  onGridSaved() {
    setTimeout(() => {
      this.onCountUpdateEvent.emit(4);
    });
  }
  

不要通过关闭开发模式的方式屏蔽这个报错，这类时序问题如果不处理，后续可能出现视图值和实际数据不一致的偶发bug。

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