Ascoltare le modifiche nel campo di un oggetto in Angular2/Typescript

Question

In Angular2/Typescript, è possibile "osservare" il campo di un oggetto per le modifiche.

Ad esempio, dire ho una classe Person con campi firstName, lastName, e fullName. È possibile aggiornare automaticamente fullName ogni volta che si modifica firstName o lastName?

Qualcosa di simile a questo:

export class Person { 
    firstName: string= ''; 
    lastName: string = ''; 
    fullName: string = ''; 

    constructor(firstName: string, lastName: string) { 
    this.firstName.onChange(() => { this.updateFullName(); }); 
    this.lastName.onChange(() => { this.updateFullName(); }); 

    this.firstName = firstName; 
    this.lastName = lastName; 
    } 

    updateFullName() { 
    this.fullName = `${this.firstName} ${this.lastName}`; 
    } 
} 

Answer 1

Primo approccio

Si potrebbe sfruttare setter dattiloscritto/getter per sincronizzare fullName con nome e cognome come descritto di seguito:

get lastName() { 
    return this._lastName; 
} 

set lastName(lastName:string) { 
    this._lastName = lastName; 
    this.fullName = this._firstName + ' ' + this._lastName; 
} 

get firstName() { 
    return this._firstName; 
} 

set firstName(firstName:string) { 
    this._firstName = firstName; 
    this.fullName = this._firstName + ' ' + this._lastName; 
} 

In questo modo quando si imposta lastName o firstName, fullName viene aggiornato automaticamente:

var p = new Person(); 
p.lastName = 'last'; 
p.firstName = 'first'; 
console.log(p.fullName); // print 'first last' 

Secondo approccio

Angular2 di default non permette di definire il cambiamento delle proprietà all'interno degli oggetti. Rileva solo gli aggiornamenti dei riferimenti. Voglio dire se il riferimento (o valore per i tipi primitivi) di una proprietà legata viene aggiornato.

Questo bien ha detto che Angular2 consente di collegare la propria strategia utilizzando il metodo hook ngDoCheck.

In esso è possibile sfruttare la classe KeyValueDiffers (da iniettare) per rilevare gli aggiornamenti in oggetti specifici.

Vedere questo link per maggiori informazioni:

• https://angular.io/docs/ts/latest/api/core/DoCheck-interface.html

Ecco un esempio:

@Component({ 
    selector: 'my-component', 
    (...) 
}) 
export class MyComponent implements DoCheck { 
    @Input() person: Person; 
    differ: any; 

    constructor(differs: KeyValueDiffers) { 
    this.differ = differs.find([]).create(null); 
    } 

    ngDoCheck() { 
    var changes = this.differ.diff(this.person); 

    if (changes) { 
     changes.forEachChangedItem((elt) => { 
     if (elt.key === 'firstName' || elt.key === 'lastName') { 
      this.person.fullName = this.person.firstName + ' ' + this.person.lastName; 
     } 
     }); 
    } 
    } 
} 

Quando il valore della proprietà prop1 viene aggiornata, il metodo doSomethingIfProp1Change è chiamato.

Vedere questo numero: http://plnkr.co/edit/uvOKMXQa9Ik8EiIhb60Y?p=preview.