En fait, il existe deux façons de détecter et de réagir lorsqu'une entrée change dans le composant enfant dans angular2 +:
- Vous pouvez utiliser la méthode de cycle de vie ngOnChanges () comme également mentionné dans les réponses plus anciennes:
@Input() categoryId: string;
ngOnChanges(changes: SimpleChanges) {
this.doSomething(changes.categoryId.currentValue);
// You can also use categoryId.previousValue and
// categoryId.firstChange for comparing old and new values
}
Liens de documentation: ngOnChanges, SimpleChanges,
Exemple de démonstration de SimpleChange
: Regardez ce plunker
- Alternativement, vous pouvez également utiliser un configurateur de propriétés d'entrée comme suit:
private _categoryId: string;
@Input() set categoryId(value: string) {
this._categoryId = value;
this.doSomething(this._categoryId);
}
get categoryId(): string {
return this._categoryId;
}
Lien de documentation: Regardez ici .
Exemple de démonstration: regardez ce plongeur .
QUELLE APPROCHE DEVRIEZ-VOUS UTILISER?
Si votre composant a plusieurs entrées, alors, si vous utilisez ngOnChanges (), vous obtiendrez toutes les modifications pour toutes les entrées à la fois dans ngOnChanges (). En utilisant cette approche, vous pouvez également comparer les valeurs actuelles et précédentes de l'entrée qui a changé et prendre des mesures en conséquence.
Cependant, si vous voulez faire quelque chose lorsque seule une entrée particulière change (et que vous ne vous souciez pas des autres entrées), il peut être plus simple d'utiliser un configurateur de propriétés d'entrée. Cependant, cette approche ne fournit pas de méthode intégrée pour comparer les valeurs précédentes et actuelles de l'entrée modifiée (ce que vous pouvez faire facilement avec la méthode de cycle de vie ngOnChanges).
EDIT 2017-07-25: LA DÉTECTION DE CHANGEMENT ANGULAIRE PEUT TOUJOURS NE PAS SE DÉCLENCHER DANS CERTAINES CIRCONSTANCES
Normalement, la détection de changement pour setter et ngOnChanges se déclenche chaque fois que le composant parent modifie les données qu'il transmet à l'enfant, à condition que les données soient un type de données primitif JS (chaîne, nombre, booléen) . Cependant, dans les scénarios suivants, il ne se déclenchera pas et vous devrez prendre des mesures supplémentaires pour le faire fonctionner.
Si vous utilisez un objet ou un tableau imbriqué (au lieu d'un type de données primitif JS) pour transmettre des données du parent à l'enfant, la détection des modifications (à l'aide de setter ou de ngchanges) peut ne pas se déclencher, comme également mentionné dans la réponse de l'utilisateur: muetzerich. Pour des solutions, regardez ici .
Si vous mutez des données en dehors du contexte angulaire (c'est-à-dire en externe), alors angular ne sera pas au courant des changements. Vous devrez peut-être utiliser ChangeDetectorRef ou NgZone dans votre composant pour rendre angulaire conscient des changements externes et ainsi déclencher la détection des changements. Référez-vous à ceci .