web-dev-qa-db-ja.com

親によってトリガーされた子コンポーネントの変数の変更を検出angular 2

2つのファイルがあります。 app.tsおよびChild.ts

アプリから子に変数を送信していますが、変数の変更を検出し、それに応じてデータを表示したいです。変数の変化を検出できません。

ヘルプはありますか？ Plunker Linkを添付し、Child.tsファイルでやりたいことをコメントで説明しました

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ファイル

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

angulareventemitterangular2-changedetection
12
amansoni211

newDataをセッターにするか、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}}

結構ですが、文字列値のみをサポートします

[newdata]=data

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

同じことを説明するために更新されたplnkrへのリンクがあります https://plnkr.co/edit/5ahxWJ?p=preview

13
Günter Zöchbauer

いくつかのコードを変更しても、同じことができます。

1）入力としてnewDataを提供し、補間を使用してデータを子コンポーネントに渡しません。

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

2）変更を検出する2つの簡単な方法は、@ Gunterが提案するngOnChangesまたはrxjs Observableサブスクライバーモデルを使用することです。簡単な方法はngOnChangesです。同じものを使用して修正したplunkrを次に示します。 https://plnkr.co/edit/5ahxWJ?p=preview

1
Siddharth Sharma