角2-理解标书和管道

Question

我在试着了解角质2是如何工作的。我目前正在阅读管道文档：https://angular.io/docs/ts/latest/guide/pipes.html，下面的示例如下：

import {Component} from 'angular2/core'

@Component({
  selector: 'hero-birthday',
  template: `
    <p>The hero's birthday is {{ birthday | date:format }}</p>
    <button (click)="toggleFormat()">Toggle Format</button>
  `
})
export class HeroBirthday {
  birthday = new Date(1988,3,15); // April 15, 1988

  toggle = true; // start with true == shortDate

  get format() { return this.toggle ? 'shortDate' : 'fullDate'}

  toggleFormat() { this.toggle = !this.toggle; }
}

令我困惑的是，为什么当用户单击按钮时birthday会被更新？所以..。单击该按钮时，将调用toggleFormat()函数，这将更改this.toggle变量。是否有什么“东西”可以检查this.toggle是否被更改，因此format是否被更改，从而更新birthday？

有人能解释一下这是怎么回事吗？

谢谢

Answer 1

正如Eric在他的评论中提到的那样，Savkin的博客文章揭示了每个组件都会获得一个相关的变更检测器，当“更改检测”运行时，该检测器将检查该组件中的所有绑定。对于无状态管道，绑定是输入数据(birthday)和参数(format)。

Angular使用Zone.js来猴子补丁/拦截每个浏览器异步事件。每次浏览器事件角调用其变化检测算法。

所以，单击按钮，toggleFormat()运行，然后更改检测运行。由于每次format()的结果都不同，这是一个“更改”，因此每次都执行/重新评估管道。DOM是按角度更新的。此时进行更改检测。然后，浏览器检测/注意DOM的变化，并更新屏幕上所看到的内容。

Answer 2

单击处理程序被触发，但它位于角区域内。因此，在toggleFormat()被称为角后，它将称为“消化”。

Angular将遍历组件树，并在需要的地方获取控制器数据，将其应用于模板，并在页面中注入新生成的Html。这是以尽可能最佳的方式完成的。

因此，您所看到的是正常的角度行为，它不一定与管道是used.If这一事实有关，您将在HTML中打印格式的值，您将看到相同的结果：

{{format}}