typescript - 检查后表达式___发生了变化

Question

为什么这么简单的组件plunk

@Component({
  selector: 'my-app',
  template: `<div>I'm {{message}} </div>`,
})
export class App {
  message:string = 'loading :(';

  ngAfterViewInit() {
    this.updateMessage();
  }

  updateMessage(){
    this.message = 'all done loading :)'
  }
}

throw :

EXCEPTION: Expression 'I'm {{message}} in App@0:5' has changed after it was checked. Previous value: 'I'm loading :( '. Current value: 'I'm all done loading :) ' in [I'm {{message}} in App@0:5]

当我的 View 启动时，我所做的只是更新一个简单的绑定(bind)吗？

Answer 1

正如 drewmoore 所述，在这种情况下，正确的解决方案是手动触发当前组件的变化检测。这是使用 ChangeDetectorRef 对象(从 angular2/core 导入)的 detectChanges() 方法或其 markForCheck() 方法完成的 方法，它也使任何父组件更新。相关example :

import { Component, ChangeDetectorRef, AfterViewInit } from 'angular2/core'

@Component({
  selector: 'my-app',
  template: `<div>I'm {{message}} </div>`,
})
export class App implements AfterViewInit {
  message: string = 'loading :(';

  constructor(private cdr: ChangeDetectorRef) {}

  ngAfterViewInit() {
    this.message = 'all done loading :)'
    this.cdr.detectChanges();
  }

}

这里还有 Plunkers 演示 ngOnInit , setTimeout , 和 enableProdMode以防万一的方法。