Änderungen in einem Objektfeld in Angular2/Typescript abhören

Question

In Angular2/Typescript ist es möglich, das Feld eines Objekts für Änderungen zu "beobachten".

Zum Beispiel sagen, ich habe eine Klasse Person mit Feldern firstName, lastName und fullName. Ist es möglich, fullName automatisch zu aktualisieren, wenn sich entweder firstName oder lastName ändert?

Etwas wie folgt aus:

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

Erster Ansatz

Sie Typoskript nutzen könnten Setter/Getter, wie unten beschrieben fullname mit Vorname und Nachname zu synchronisieren:

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; 
} 

Auf diese Weise Wenn Sie lastName oder firstName festlegen, wird fullName automatisch aktualisiert:

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

Zweiter Ansatz

Angular2 standardmäßig erlaubt keine Änderung der Eigenschaften innerhalb von Objekten zu definieren. Es erkennt nur Aktualisierungen von Referenzen. Ich meine, wenn der Verweis (oder der Wert für primitive Typen) einer gebundenen Eigenschaft aktualisiert wird.

Das Bien sagte, Angular2 ermöglicht, Ihre eigene Strategie mit der ngDoCheck Hook-Methode zu pluginieren.

Darin können Sie die KeyValueDiffers-Klasse (die injiziert werden soll) nutzen, um Updates in bestimmten Objekten zu erkennen.

Siehe diesen Link für weitere Informationen:

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

ist hier ein Beispiel:

@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; 
     } 
     }); 
    } 
    } 
} 

Wenn der Wert der prop1 Eigenschaft aktualisiert wird, die doSomethingIfProp1Change Methode ist namens.

Siehe diese Plunkr: http://plnkr.co/edit/uvOKMXQa9Ik8EiIhb60Y?p=preview.