2016-04-05 3 views
1

私はこのarticleを参照しています。Angular2を使用して単方向データフローを構築することが常に可能なのはなぜですか?

angular2angular1より速い理由は、angular2が一方向の変化検出ツリーを構築する能力を持っているからです。

@outputeventEmitterがある場合、データフローは本質的には一方向ではないということは、データがその親に戻ることができるからです。私たちの上

例えば

Child

@Component({ 
    selector: 'Child', 
    inputs: ['myfullname'], 
    outputs: ['changefirstname'] 
}) 
@View({ 
template: ` 
    <div (click)="changefirstname()"> 
    {{myfullname}} 
    </div> 
` 
}) 

export class Child { 
    public myfullname: String; 
    public myevent: EventEmitter = new EventEmitter(); 

    changefirstname(evt) { 
     this.myevent.next('newfirstname'); 
    } 
} 

Parent

@Component({ 
    selector: 'Parent', 
    directives: [Child] 
}) 
@View({ 
template: ` 
    <Child [myfullname]={{myfullname}} (myevent)="handleMyEvent($event)"></Child> 
` 
}) 

export class Parent { 

    this.myfullname = 'default'; 

    handleMyEvent(arg) { 
    this.myfullname = arg; 
    } 
} 

子がクリックされるたびに、かなりシンプルなセットアップ

を持っている、名前は親に更新されます、子供が名前を受け取るので親からの子も更新されます。トップダウンではないので、これは単方向データフローではないことがわかります。

我々はまたCモデルがダウンCB両方にパスを再されたモデルを変更Aにイベントを発することができる、より極端な例

A 
/ \ 
B  C 

を構築することができます。この変更検出でCサブツリーのみをトラバースすると、ABの両方のモデル変更が見逃されます

この記事は間違っていますか?または私は何かを逃していますか?

答えて

0

データが

確かにその親に戻って流れることができるからです。しかし、情報はとしてイベントとして親に流れますが、データは親から子に流れます。

基本的に、子はデータを変更しません。親(またはデータを所有するもの)のみが行います。

0

値が変更されると、次の変更検出サイクルで変更検出がそれを認識し、バインドを親から子への入力に更新します。

出力がイベントを発し、その後、親が

を更新され、イベントが新しい変化検出サイクルを開始します。

これは、変更の検出自体が変更を一方向(一方向)にのみ親から子に伝播することを意味します。
変更検出自体が変更を両方向に伝播する場合、サイクルを中断させる他の手段(イベント)によって、他の方向の変化が伝播されます。

も参照してくださいhttp://pascalprecht.github.io/slides/angular-2-change-detection-explained

+0

それはangular2また、変化検出における 'O(n)の' trasversalあるようだ、なぜスライド主張angular2で著者はangular1よりも高速です。 '.push'を使うようにangular2を最適化するほうが速いのですか? – Kevin

+0

Angular1はよく分かりませんが、Angular1にモデルが安定するまでツリーの同じ部分を何回か繰り返しなければならないサイクルにつながる双方向データ結合があると、> O(n )。 –

+0

しかし、Angular2でサイクルを構成することもできます。そのサイクルは単にデータ変更ではなくデータ変更とイベントで構成されていますが、どちらの方法でも変更検出を実行する必要があります。 – Kevin

関連する問題