2017-12-08 11 views
0

私は簡単な質問があります: "いつ、なぜAngular2のバインディングが評価/更新されましたか?"ソース1が設定されている場合、私は束縛特性を達成したいと思いますAngular2 - すぐにバウンドプロパティを更新

はすぐに更新されます。

この非常に単純なplunkerデモが行動を示しています

Plunker demo

とコードの最も興味深い部分:

setValue() { 
    console.log(this.childComponent.prop); 
    this.propValue = "button clicked"; 
    //NOW I WANT TO GET THE NEW VALUE 
    console.log(this.childComponent.prop); 
} 

テンプレート内の更新された補間は、バインディングが正しく評価されると言うと、宛先プロパティは更新されますが、時には後でsetValueメソッドの範囲外になります。

なぜこの動作が必要ですか?

私は、コンポーネントの相互作用を持つ作品のこの方法を知っている必要はありませんが...私は、より複雑なカスタムフォーム・コントロール(ControlValueAccessorを実装する)を持っています。今、私はいくつかの "ビジネスプロセス"について取り組んでいます。この複雑なコンポーネントのngModelは、オブジェクトのお互いの部分に一般的に影響する可能性のあるより多くのコンポーネントによってアクセスできるより複雑なオブジェクトの一部です。

簡体例:

{ 
public modelA: SomeClasss; <-- this is ngModel of comp. A 
public modelB: SomeClasss; {...} <-- this is ngModel of comp. B 
} 

またどこかのコードで

モデル:

updateMagicUI方法があります、それに基づいてComponentAの内部構造を扱ういくつかの複雑なロジックを運ぶ
update(X: SomeClass) { 
    this.modelA = X; 
    this.componentA.updateMagicUI(); 
} 

新たに設定された値。このロジックは、値が変更されるたびにではなく、明示的に呼び出される場合にのみ実行するようにします。

import { ..., ApplicationRef } from '@angular/core' 
... 

export class App { 
    ... 
    constructor(private applicationRef: ApplicationRef) { 
    ... 
    } 
    setValue() { 
    console.log(this.childComponent.prop); 
    this.propValue = "button clicked"; 
    this.applicationRef.tick(); // Trigger change detection 
    console.log(this.childComponent.prop); 
    } 
} 

あなたはthis plunkerでそれをテストすることができます。

答えて

0

一つの方法は、変化検出をトリガするthis answerで提案はApplicationReftickメソッドを呼び出すことです。

関連する問題