小编Gus*_*sta的帖子

我正在学习Angular变化检测过程并检查Chrome中的开发工具,我看到了奇怪的行为.

我的plnkr演示了这种行为:http://plnkr.co/edit/cTLF00nQdhVmkHYc8IOu

我有一个简单的组件与视图:

<li *ngFor="let item of list">{{item.name}}</li>

和构造函数:

constructor() {
    this.list = [{name: 'Gustavo'}, {name: 'Costa'}]

模拟我添加的简单请求:

// simulating request repaint the DOM
setInterval( () => {
  this.list = [{name: 'Gustavo'}, {name: 'Costa'}];
}, 2000);

如果您注意到,数组list会收到一个等于初始值的列表.让我们假设当Angular在变更检测过程中检查视图中的值时,我们有这样的代码:

if( oldName !== name )  { // ( 'Gustavo' !== 'Gustavo')
 // update the view
}

但是值是相同的,为什么角度每2秒重复一次DOM.？

但如果我改变对象,则不会发生REPAINT

// simulating request there is not repaint
setInterval( () => {
  this.list[0].name = "Gustavo"; // no repaint because it's …

我正在阅读有关 Zone.JS 和 Angular 更改检测过程的信息，在代码源中，Zone.JS 通过将检查传播到所有组件来通知 Angular 有关更改并在第一个组件中从上到下运行验证，但在我的测试，我有奇怪的行为。

检查我的样本：

http://plnkr.co/edit/QPHBQ7cYg9JFZr2oVnGZ?p=preview

该示例具有以下架构：

<app-component>
    <child-component>
        <grand-child-component>

它们相互嵌套，都没有 @Input 属性，而且都是 OnPush，它们在视图中显示一个简单的值，如：

看法：

{{getComponentValue}}

打字稿

value = "app component";

get getComponentValue() { // <-- ES6 get to log when Angular check
    console.log('change detection checking here in component app-component')
    return this.value;
}

您可以在示例中检查此代码。

当应用程序启动时，我们可以看到日志：

check component app
check component child
check component grand child

很酷，但是，现在让我们创建一个场景，如果孙子触发 DOM 事件？

改变孙子的观点

<button (click)="undefined"> {{getComponentValue}} </button>  
<!-- (click)="undefined" trigger an event -->

然后我们有日志：

check component app
check component child …