Question

我试图了解Angular 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变量。有没有＆＃34;东西＆＃34;检查this.toggle是否已更改，因此format已更改，更新birthday？

有人可以解释这是如何工作的吗？

由于

Answer 1

正如埃里克在评论中提到的那样，Savkin's blog post表明每个组件都有一个相关的变化检测器，当检测到＆＃34;更改检测时，它会检查该组件中的所有绑定。运行。对于无状态管道，绑定是输入数据（birthday）和参数（format）。

Angular使用Zone.js来修补/拦截每个浏览器异步事件。每次浏览器事件后，Angular都会调用其更改检测算法。

因此，您单击按钮，toggleFormat()运行，然后更改检测运行。由于format()的结果每次都不同，这是一个＆＃34;更改＆＃34;因此每次都会执行/重新评估管道。 DOM由Angular更新。此时进行变化检测。然后，浏览器检测/通知DOM更改并更新您在屏幕上看到的内容。

Answer 2

点击处理程序已触发，但在Angular区域内。因此，在toggleFormat()被调用后，Angular会将其称为“摘要”。

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

所以你看到的是正常的Angular行为，它并不一定与正在使用管道的事实有关。如果你要在HTML中打印格式的值，你会看到相同的结果：

{{format}}

Angular 2 - 了解出价和管道

2 个答案: