親コンポーネントに変数の変更を通知するにはどうすればいいですか？

Question

私はアプリケーションでinternatiolizationをやっています。親コンポーネントの内部には多くのコンポーネントがあります。次のように私は、現在選択された通貨を設定していますapp.component.tsで

、

ngOnInit() {  
    this.selectedLanguage = "EN"; 
    this.selectedCurrency = "EUR"; 
    //also setting to local storage 
    localStorage.setItem('currency', this.selectedCurrency); 
} 

あり、私はパイプにselectedcurrencyを使用する必要があり、別の子コンポーネントがあるので、私は取得しています

export class EveComponent implements OnInit { 
    selectedCurrency :string; 
    ngOnInit() { 
     this.selectedCurrency = localStorage.getItem("currency"); 
    } 
} 

を次のように中selectedcurrencyが、変更が親で起きたときに、これは、動作しているようですしません。私は私の親ページのselectedCurrencyを変更したとき と私のパイプ次のように、

<div class="price">{{123 | currConvert | currency:selectedCurrency:true:'3.2-2'}}</div> 

は今、私はそれが同様にEveComponentに適用することにしたいです。どのようにangular2でそれを行うには？

Answer 1

1 - あなたの子コンポーネントがappComponentの直接の子である場合、子に@Inputを使用できるはずです。

親コンポーネントテンプレート：

<child-cmp [selectedCurrency]="selectedCurrency"></child-cmp> 

、その後、子コンポーネント

export class EveComponent implements OnInit { 
    @Input() selectedCurrency :string; 
} 

に子供にはもうあなたのlocalStorageサービスを使用する必要はありません内部。

2 - 子コンポーネントが、この場合には、あなたが持つEventEmitterを作成することができ、親コンポーネントの直接の子ではない：あなたの中

のlocalStorageサービス：

export class LocalStorageService{ 
    $currencyChanges = new EventEmitter<any>(); 

    public setItem(item){ 
     // what ever u where doing , plus : 
     this.$currencyChanges.emit(item); 
    } 
} 

そして、子供の中には既にサービスがあるので、できる：

エクスポートクラスEveComponentはOnInit {

を実装しています

ngOnInit() { 
    localStorage.$currencyChanges.subscribe((changes)=>{ 
     this.selectedCurrency = changes; 

    }); 
} 

Answer 2

ngOnInit()でモデルを変更することは、通常はお勧めできません。 ngOnInit()が変更検出によって呼び出され、変更検出中に変更されると、通常、「式がチェックされた後に式が変更されました」のような問題が発生します。

これは、より良い動作するはず：

constructor() { 
    this.selectedCurrency = localStorage.getItem("currency"); 
} 

コードをコンストラクタの中でも（テストと同じように）いくつかの欠点があります。その標準はParent-> Child通信やsibling->sibling通信のためのケースのようにように思えるあなたの質問を1として

別の回避策は、したがって、

constructor(private cdRef:ChangeDetectorRef) {} 

ngOnInit() { 
    this.selectedCurrency = localStorage.getItem("currency"); 
    this.cdRef.detectChanges(); 
} 

Answer 3

です。

は、私はあなたが[少なくとも currency用]の値（およびその観測できない）

は、あなたが治療しようとしましたためsharedServiceとして「のlocalStorage」を使用しようとしている意味ローカルストレージにcurrencyを保存していることを観察しましたselectedCurrencyを入力としてchildとparentCurrencyに初期化します。 parentCurrencyは、それ自体または他の兄弟によって初期化/更新されてもよい。 これは、メッセージの受け渡しに関する限り、あなたの親が兄弟のメディエーターとして行動する必要があることを意味します。

子供

export class EveComponent implements OnInit { 
    @Input() 
    selectedCurrency :string; 
    ngOnInit() { 
     this.selectedCurrency = localStorage.getItem("currency"); 
    } 
} 

親テンプレート

<child [selectedCurrency ]="parentCurrency"></child> 

親

ngOnInit() {  
    this.selectedLanguage = "EN"; 
    this.parentCurrency = "EUR"; // this property can be changed/updated and expected to be observed. 
    //also setting to local storage 
    localStorage.setItem('currency', this.parentCurrency); 
} 

A Githubのサンプルは間違いなく何が起こっているのかデバッグに役立ちます。