Angular2单向数据流

Question

Angular 2支持单向数据流，如果有人能够解释或提供一些资源的参考资料，可以通过图解详细解释单向数据流。

Answer 1

父母与孩子

Angular2只使用此绑定语法

从父级到子级进行单向数据绑定

// child
@Input() childProp;

<!-- parent -->
[childProp]="parentProp"

这些绑定由Angular2的更改检测更新。

孩子为父母

从子级到父级的更改由输出发出的事件传播，与更改检测无关。

// child
@Output() childPropChanged = new EventEmitter();

clickHandler() {
  this.childPropChange.emit('someValue');
}

<!-- parent -->
(childPropChange)="parentProp = $event"

在事件或其他异步调用完成后再次调用Angulars更改检测。

单向数据流

单向数据流意味着变化检测不会导致周期。从根组件向叶组件执行更改检测，并且当更新所有叶组件时，更改检测周期完成。

<强> prodMode / DEVMODE

当更改检测本身导致更改时，则会在devMode中引发错误（另请参阅What is difference between production and development mode in Angular2?），这会阻止违反单向数据流。

双向绑定

Angular2中没有真正的双向绑定。双向绑定语法

[(childProp)]="parentProp"

只是将上面显示的父对子和子对父组合绑定到单个绑定的语法糖。