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中会抛出错误(另请参阅Angular2中的生产和开发模式之间有什么区别？),这会阻止违反单向数据流.

双向绑定

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

[(childProp)]="parentProp"

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