web-dev-qa-db-fra.com

Détecter le changement de variable du composant enfant déclenché par angular parent 2

J'ai 2 fichiers. app.ts et Child.ts

J'envoie une variable d'application à enfant et je souhaite détecter tout changement dans la variable et afficher les données en conséquence. Je ne suis pas capable de détecter les changements de variable.

De l'aide? J'ai joint Plunker Link et j'ai également expliqué ce que je veux faire dans le fichier Child.ts dans les commentaires.

Fichier 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 {}

Fichier 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
8
amansoni211

Soit vous faites newData un setter ou vous implémentez 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

indice

newdata={{data}}

c'est bien, mais ne supporte que les valeurs de chaîne

[newdata]=data

prend en charge tous les types de valeurs.

Voici un lien vers plnkr mis à jour pour expliquer la même chose, https://plnkr.co/edit/5ahxWJ?p=preview

9
Günter Zöchbauer

Certains changements de code peuvent faire le même travail.

1) fournissez newData en entrée et n'utilisez pas d'interpolation pour transmettre des données au composant enfant.

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

2) ngOnChanges suggéré par @Gunter ou le modèle d'abonné observable de rxjs, le plus simple étant ngOnChanges, est de détecter facilement les modifications. Voici votre plunkr modifié utilisant le même. https://plnkr.co/edit/5ahxWJ?p=preview

1
Siddharth Sharma