親の角度2でトリガーされた子コンポーネントの変数の変化を検出

Question

私は2つのファイルを持っています。 app.tsとChild.ts

私はappからchildに変数を送信しています。私は変数の変化を検出し、それに応じてデータを表示したいと思います。私は変数の変化を検出することができません。

ヘルプ私はPlunkerリンクを添付しており、また、私はファイル

App.tsが

//our root app component 
import {Component, NgModule} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 
import {ChildCom} from './child.ts' 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello</h2> 
     <child-com newdata={{data}}></child-com> 
    </div> 
    `, 
}) 
export class App { 
    data: any = []; 

     constructor(){ 
      this.data = [{"name":"control","status":"false"}]; 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App, ChildCom ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

Child.tsファイルコメントでChild.tsファイルで何をしたいかを説明しました

import {Component, Input} from '@angular/core'; 

@Component({ 
    selector: 'child-com', 
    template: ` 
    <div> 
     <p>Controls: {{newdata}}</p> 
    </div> 
    `, 
}) 

export class ChildCom { 
    @Input() newdata: any = []; 

    constructor(){ 
    } 

    // here I want to check if value of control in newdata variable is false 
    // then display message on front end "your controls are not working" 
    // if value of control in newdata variable is true 
    // then display message on front end "your controls are working fine." 
    // this should automatically happen whenever I change the value of newdata variable 
} 

Plunker Link

Answer 1

いずれかをnewDataとします。 EtterのかOnChanges

export class ChildCom { 
    private _newdata: any = []; 
    @Input() 
    set newdata(value) { 
    // code here 
    } 
} 

export class ChildCom implements OnChanges { 
    @Input() set newdata(: any = []; 

    ngOnChanges(changes) { 
    // code here 
    } 
} 

https://angular.io/docs/ts/latest/api/core/index/OnChanges-class.html

ヒント

newdata={{data}} 

は結構ですが、唯一の文字列値に

をサポートして実装します

は、すべてのタイプの値をサポートします。ここで

は同じ、https://plnkr.co/edit/5ahxWJ?p=preview

Answer 2

ビン子供に親からパスデータと：

<child-com [newdata]="data"></child-com> 

これは、コンポーネント間の通信上の異なる方法のための本当に良いリソースです：あなたが探しているものを

https://angular.io/docs/ts/latest/cookbook/component-communication.html

あり、このような鼎入力バインディング

Answer 3

いくつかのコードの変更は、同じ仕事をすることができます説明するために更新plnkrへのリンクです。

1）newDataを入力として提供し、補間を使用して子コンポーネントにデータを渡しません。 @Gunterによって示唆又はrxjs観測加入者モデル、簡単なものであるngOnChangesを使用するよう変化を検出する

<child-com [newdata]="data"></child-com> 

2）2つの簡単な方法はngOnChangesあります。ここでは同じものを使用してあなたの修正版です。 https://plnkr.co/edit/5ahxWJ?p=preview