¿Cómo detectar cuándo cambia un valor de @Input () en Angular?

Si te encuentras con algo que no comprendes puedes dejarlo en la sección de comentarios y te ayudaremos lo más rápido posible.

Solución:

En realidad, hay dos formas de detectar y actuar cuando una entrada cambia en el componente secundario en angular2+:

1. 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
        
    
    

Vínculos de documentación: ngOnChanges, SimpleChanges, SimpleChange
Ejemplo de demostración: mira este plunker

2. Como alternativa, también puede utilizar un establecedor de propiedades 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: Mira aquí.

Ejemplo de demostración: Mira este plunker.

¿QUÉ ENFOQUE DEBE UTILIZAR?

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 simple usar un setter de propiedad 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 de ciclo de vida ngOnChanges).

EDITAR 2017-07-25: LA DETECCIÓN DE CAMBIO ANGULAR AÚN PUEDE NO DISPARAR BAJO ALGUNAS CIRCUNSTANCIAS

Normalmente, la detección de cambios tanto para setter como para ngOnChanges se activará cada vez que el componente principal cambie los datos que pasa al secundario. siempre que los datos sean un tipo de datos primitivo JS (stringnúmero, booleano). Sin embargo, en los siguientes escenarios, no se activará y deberá realizar acciones adicionales para que funcione.

1. Si está utilizando un objeto anidado o array (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 soluciones mira aquí.

2. Si está mutando datos fuera del contexto angular (es decir, externamente), angular no sabrá de los cambios. Es posible que deba usar ChangeDetectorRef o NgZone en su componente para que Angular esté al tanto de los cambios externos y, por lo tanto, active la detección de cambios. Consulte esto.

Utilizar el ngOnChanges() método de ciclo de vida en su componente.

Se llama a ngOnChanges justo 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 cuando usaba el SimpleChanges escriba la firma de la función. Para evitar los errores, utilice el any palabra clave en la firma en su lugar.

ngOnChanges(changes: any) 
    console.log(changes.myInput.currentValue);

EDITAR:

Como Jon señaló a continuación, puede utilizar el SimpleChanges firma cuando se utiliza la notación de corchetes en lugar de la notación de puntos.

ngOnChanges(changes: SimpleChanges) 
    console.log(changes['myInput'].currentValue);

Te invitamos a sostener nuestra función dejando un comentario y dejando una puntuación te lo agradecemos.

---

---

Utiliza Nuestro Buscador