Solución:
En realidad, hay dos formas de detectar y actuar cuando una entrada cambia en el componente secundario en angular2 +:
- Puedes usar el método de ciclo de vida ngOnChanges () como también se menciona en respuestas anteriores:
@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
}
Enlaces de documentación: ngOnChanges, SimpleChanges, SimpleChange
Ejemplo de demostración: mira este plunker
- Alternativamente, también puede utilizar un establecedor de propiedad de entrada como sigue:
private _categoryId: string;
@Input() set categoryId(value: string) {
this._categoryId = value;
this.doSomething(this._categoryId);
}
get categoryId(): string {
return this._categoryId;
}
Enlace de documentación: Mire aquí.
Ejemplo de demostración: mira este plunker.
¿QUÉ ENFOQUE DEBERÍA USAR?
Si su componente tiene varias entradas, entonces, si usa ngOnChanges (), obtendrá todos los cambios para todas las entradas a la vez dentro de ngOnChanges (). Con este enfoque, también puede comparar los valores actuales y anteriores de la entrada que ha cambiado y tomar las medidas correspondientes.
Sin embargo, si desea hacer algo cuando solo cambia una entrada en particular (y no le importan las otras entradas), entonces podría ser más sencillo usar un establecedor de propiedades de entrada. Sin embargo, este enfoque no proporciona una forma integrada de comparar los valores anteriores y actuales de la entrada modificada (lo que puede hacer fácilmente con el método del ciclo de vida ngOnChanges).
EDITAR 2017-07-25: LA DETECCIÓN DE CAMBIO ANGULAR PUEDE AÚN NO DISPARAR BAJO ALGUNAS CIRCUNSTANCIAS
Normalmente, la detección de cambios tanto para el setter como para ngOnChanges se activará siempre que el componente principal cambie los datos que le pasa al hijo, siempre que los datos sean un tipo de datos primitivo JS (cadena, número, booleano). Sin embargo, en los siguientes escenarios, no se disparará y debe realizar acciones adicionales para que funcione.
-
Si está utilizando un objeto o matriz anidados (en lugar de un tipo de datos primitivo JS) para pasar datos de padre a hijo, es posible que la detección de cambios (usando setter o ngchanges) no se active, como también se menciona en la respuesta del usuario: muetzerich. Para encontrar soluciones, busque aquí.
-
Si está mutando datos fuera del contexto angular (es decir, externamente), entonces angular no conocerá los cambios. Es posible que deba usar ChangeDetectorRef o NgZone en su componente para hacer que angular sea consciente de los cambios externos y, por lo tanto, activar la detección de cambios. Refiérase a esto.
Utilizar el ngOnChanges() método de ciclo de vida en su componente.
ngOnChanges se llama inmediatamente después de que se hayan verificado las propiedades vinculadas a los datos y antes de que se verifiquen los elementos secundarios de vista y contenido si al menos uno de ellos ha cambiado.
Aquí están los documentos.
Recibía errores en la consola, así como en el compilador y el IDE al usar el SimpleChanges escriba la firma de la función. Para evitar los errores, utilice el any en su lugar, la palabra clave en la firma.
ngOnChanges(changes: any) {
console.log(changes.myInput.currentValue);
}
EDITAR:
Como Jon señaló a continuación, puede utilizar el SimpleChanges firma cuando se usa notación de corchetes en lugar de notación de puntos.
ngOnChanges(changes: SimpleChanges) {
console.log(changes['myInput'].currentValue);
}