尽管已经有很多答案，并且有一篇关于变更检测的很好的文章的链接，但我还是想在这里发表我的意见。我认为检查是有原因的，所以我考虑了我的应用程序的架构，并意识到视图中的变化可以通过使用行为主体和正确的生命周期钩子来处理。这就是我的解。

I use a third-party component (fullcalendar), but I also use Angular Material, so although I made a new plugin for styling, getting the look and feel was a bit awkward because customization of the calendar header is not possible without forking the repo and rolling your own. So I ended up getting the underlying JavaScript class, and need to initialize my own calendar header for the component. That requires the ViewChild to be rendered befor my parent is rendered, which is not the way Angular works. This is why I wrapped the value I need for my template in a BehaviourSubject<View>(null): calendarView$ = new BehaviorSubject<View>(null);

接下来，当我可以确定视图被检查时，我用@ViewChild中的值更新该主题:

  ngAfterViewInit(): void {
    // ViewChild is available here, so get the JS API
    this.calendarApi = this.calendar.getApi();
  }

  ngAfterViewChecked(): void {
    // The view has been checked and I know that the View object from
    // fullcalendar is available, so emit it.
    this.calendarView$.next(this.calendarApi.view);
  }

然后，在我的模板中，我只使用异步管道。没有黑客与变更检测，没有错误，工作顺利。

如果你需要更多细节，请尽管问。

我得到了这个错误，因为我声明了一个变量 使用ngAfterViewInit改变了它的值

export class SomeComponent {

    header: string;

}

来修复我从

ngAfterViewInit() { 

    // change variable value here...
}

to

ngAfterContentInit() {

    // change variable value here...
}

一个小工作周围我用过很多次

Promise.resolve(data).then(() => { console.log (" !更改组件日期!”); this。dateNow = new Date(); this.cdRef.detectChanges (); });

我认为你能想到的最好和最干净的解决方案是:

@Component( {
  selector: 'app-my-component',
  template: `<p>{{ myData?.anyfield }}</p>`,
  styles: [ '' ]
} )
export class MyComponent implements OnInit {
  private myData;

  constructor( private myService: MyService ) { }

  ngOnInit( ) {
    /* 
      async .. await 
      clears the ExpressionChangedAfterItHasBeenCheckedError exception.
    */
    this.myService.myObservable.subscribe(
      async (data) => { this.myData = await data }
    );
  }
}

用Angular 5.2.9测试过

正如@leocaseiro在github上提到的那样。

我为那些正在寻找简单解决方案的人找到了3个解决方案。 1)从ngAfterViewInit移动到ngAfterContentInit 2)移动到ngAfterViewChecked结合ChangeDetectorRef as 建议在#14748(评论) 3)继续使用ngOnInit()，但之后调用ChangeDetectorRef.detectChanges() 您的更改。

将代码从ngAfterViewInit移到ngAfterContentInit。

视图在内容之后被初始化，因此ngAfterViewInit()在ngAfterContentInit()之后被调用