Cómo escuchar los cambios de valor de la propiedad de clase TypeScript – Angular

Este equipo de especialistas pasados muchos días de investigación y de juntar de datos, obtuvieron la respuesta, esperamos que te sea útil en tu plan.

Solución:

Todavía puede verificar el cambio de valor de los miembros del campo del componente por KeyValueDiffers a través de DoCheck gancho de vida

import  DoCheck, KeyValueDiffers, KeyValueDiffer  from '@angular/core';

differ: KeyValueDiffer;
constructor(private differs: KeyValueDiffers) 
  this.differ = this.differs.find().create();


ngDoCheck() 
  const change = this.differ.diff(this);
  if (change) 
    change.forEachChangedItem(item => 
      console.log('item changed', item);
    );
  

ver manifestación.

Creo que la mejor solución para su problema es usar un decorador que reemplace el campo original con una propiedad automáticamente, luego en el configurador puede crear un SimpleChanges objeto similar al creado por angular para usar la misma devolución de llamada de notificación que para angular (alternativamente, podría crear una interfaz diferente para estas notificaciones, pero se aplica el mismo principio)

import  OnChanges, SimpleChanges, DoCheck, SimpleChange  from '@angular/core';

function Watch() : PropertyDecorator & MethodDecorator
    function isOnChanges(val: OnChanges): val is OnChanges
        return !!(val as OnChanges).ngOnChanges
    
    return (target : any, key: string 

// Usage
export class MyClass implements OnChanges 


    //Properties what I want to track !
    @Watch()
    myProperty_1: boolean  =  true
    @Watch()
    myProperty_2 =  ['A', 'B', 'C'];
    @Watch()
    myProperty_3 = ;

    constructor()  
    ngOnChanges(changes: SimpleChanges) 
        console.log(changes);
    


var myInatsnce = new MyClass(); // outputs original field setting with firstChange == true
myInatsnce.myProperty_2 = ["F"]; // will be notified on subsequent changes with firstChange == false

como se dijo puedes usar

public set myProperty_2(value: type): void 
 if(value) 
  //doMyCheck
 

 this._myProperty_2 = value;

y luego si necesitas recuperarlo

public get myProperty_2(): type 
  return this._myProperty_2;

de esa manera, puede hacer todas las comprobaciones que desee al configurar/obtener sus variables, de modo que estos métodos se activen cada vez que configure/obtenga la propiedad myProperty_2.

pequeña demostración: https://stackblitz.com/edit/angular-n72qlu

Sección de Reseñas y Valoraciones

Agradecemos que quieras añadir valor a nuestro contenido dando tu veteranía en las anotaciones.

---

---

Utiliza Nuestro Buscador