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