In realtà, ci sono due modi per rilevare e agire quando un input cambia nella componente figlio in angular2 +:
- È possibile utilizzare il metodo del ciclo di vita ngOnChanges () come indicato anche nelle risposte precedenti:
@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
}
Link alla documentazione: ngOnChanges, SimpleChanges, SimpleChange
Demo Esempio: guarda questo plunker
- In alternativa, è anche possibile utilizzare un setter proprietà input come segue:
private _categoryId: string;
@Input() set categoryId(value: string) {
this._categoryId = value;
this.doSomething(this._categoryId);
}
get categoryId(): string {
return this._categoryId;
}
Link alla documentazione: guarda qui .
Esempio dimostrativo: guarda questo plunker .
QUALE APPROCCIO DOVETE USARE?
Se il componente ha diversi input, quindi, se si utilizza ngOnChanges (), si otterranno tutte le modifiche per tutti gli input contemporaneamente in ngOnChanges (). Usando questo approccio, puoi anche confrontare i valori attuali e precedenti dell'input che è cambiato e intraprendere le azioni di conseguenza.
Tuttavia, se vuoi fare qualcosa quando cambia solo un singolo input (e non ti preoccupi degli altri input), potrebbe essere più semplice usare un setter proprietà input. Tuttavia, questo approccio non fornisce un modo integrato per confrontare i valori precedenti e attuali dell'input modificato (cosa che puoi fare facilmente con il metodo del ciclo di vita di ngOnChanges).
MODIFICA 25/07/2017: LA RILEVAZIONE DEL CAMBIAMENTO ANGOLARE PU ST ANCORA NON INCENDI IN ALCUNE CIRCOSTANZE
Normalmente, il rilevamento delle modifiche sia per setter che per ngOnChanges viene attivato ogni volta che il componente padre modifica i dati che passa al figlio, a condizione che i dati siano un tipo di dati primitivo JS (stringa, numero, valore booleano) . Tuttavia, nei seguenti scenari, non si attiverà e devi fare ulteriori azioni per farlo funzionare.
Se si utilizza un oggetto nidificato o un array (anziché un tipo di dati primitivo JS) per passare i dati da padre a figlio, il rilevamento delle modifiche (utilizzando setter o ngchanges) potrebbe non attivarsi, come indicato anche nella risposta dell'utente: muetzerich. Per soluzioni guarda qui .
Se stai mutando i dati al di fuori del contesto angolare (cioè esternamente), allora l'angolare non conoscerà i cambiamenti. Potrebbe essere necessario utilizzare ChangeDetectorRef o NgZone nel componente per rendere gli angolari consapevoli delle modifiche esterne e quindi attivare il rilevamento delle modifiche. Fare riferimento a questo .