Question

这是我的代码

@Component({
  template: `<h1>Hello from A</h1>
  <ul>
    <li *ngFor="#letter of letters; #i = index">
      <button (click)="appendW(i)">{{letter | uppercase}}</button>
    </li>
  </ul>
  <button (click)="doSomething()">Click</button>`,
  pipes: [UpperCasePipe],
  directives: [NgFor]
})
export class AComponent {
  letters = ['a','b','c','d'];
  contructor(){

  }

  appendW(index) {
    // console.log(letter);
    setTimeout(()=>{
      this.letters[index] += "W";
    }, 1000)
  }
  ...
}

Plnkr

在setTimeout之后，对内容和视图进行两次角度检查。有人可以解释一下吗？为什么角度需要检查TWICE？

Answer 1

Angular利用区域通过修补一些异步API（如addEventHandler，setTimeout，...）来了解事件何时完全处理，然后在每个事件后运行更改检测。

在开发模式下，Angular会在第一个之后执行额外的更改检测。因为两者之间没有任何事件，所以不应该发生任何变化。

如果模型仍然发生变化，Angular认为这可能是一个错误。

可能的原因：

视图绑定的字段，getter或函数每次都返回一个不同的实例，这被识别为更改。
这通常使用返回数组的已过滤子范围的函数。除非过滤条件已更改，否则应将此子范围分配给字段并返回相同的缓存实例 Angular仅比较先前和当前返回的数组的标识，并忽略数组（或其他对象）的内容是否仍然相同。
由未在Angulars修补区域内注册的事件调用的代码导致模型更改。
这通常是由未在Angular中初始化的第三方库引起的。如果可能，在Angular中初始化它们，或者通知Angular有关更改（Triggering Angular2 change detection manually）

在生产模式中，Angular只检查一次并忽略可能的副作用。

在Angular2中，为什么在setTimeout之后有2次检查内容和视图？

1 个答案: