Angular2单向数据流 [英] Angular2 unidirectional data flow

问题描述

Angular 2支持单向数据流，如果有人可以解释或提供使用图表详细解释单向数据流的资源参考，将不胜感激.

Angular 2 supports unidirectional data flow, would appreciate if someone could explain or give some references of a resource that explains unidirectional data flow in detail with diagrams.

推荐答案

孩子的父母

Angular2仅使用此绑定语法从父级到子级进行单向数据绑定

Angular2 has only uni-directional data-binding from parent to child using this binding syntax

// child
@Input() childProp;

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

这些绑定通过Angular2的更改检测进行更新.

These bindings are updated by Angular2's change detection.

孩子对父母

从子项到父项的更改通过输出发出的事件传播，与更改检测无关.

Changes from child to parent are propagated by events emitted by outputs and are unrelated to change detection.

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

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

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

在完成事件或另一个异步调用之后，再次调用角度更改检测.

Angulars change detection is invoked again after an event or another async call was completed.

单向数据流

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

Uni-directional data flow means that change detection can't cause cycles. Change detection is executed from the root component towards the leaf components and when all leaf components are updated, the change detection cycle is completed.

prodMode/devMode

当更改检测本身导致更改时，则devMode中会引发错误(另请参见

When change detection itself causes a change, then an error is thrown in devMode (see also What is difference between production and development mode in Angular2?) which prevents that uni-directional data-flow is violated.

双向绑定

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

There isn't really two-way binding in Angular2. The two-way binding syntax

[(childProp)]="parentProp"

只是将上面显示的父母与孩子和孩子与父母的绑定结合到单个绑定的语法糖.

is only syntactic sugar to combine parent-to-child and child-to-parent binding shown above to a single binding.

这篇关于Angular2单向数据流的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！