Kind Komponente über Änderungen in Angular2 diesen Artikel

Question

Angenommen, ich habe einfach Angular2 Komponente

@Component({ selector: 'parent' }) 
@View({ 
    template: ` 
     <p>Parent {{ data }}</p> 
     <child [model]="data"></child> 
    `, 
    directives : [Child] 
}) 
export class Parent { 
    data: number = 42; 
} 

, wie Sie es verwendet eine andere einfache Komponente

@Component({ 
    selector: 'child', 
    properties : ['model'] 
}) 
@View({ 
    template: ` 
     <p>Child {{ model }}</p> 
    `, 
}) 
export class Child { 
    model: number; 
} 

I model zum child von der parent Komponente bin vorbei sehen können durch die Winkels [property] Syntax für Datenbindung. Also, wenn ich einige Änderungen von model in der parent verfolgen möchte, kann ich einfach Ereignis zur child hinzufügen und durch die (event) Syntax die Änderungen in der "Eltern" verfolgen. Also, wie kann ich die umgekehrte Situation implementieren, wenn parent Änderungen model und child möchten benachrichtigt werden?

Answer 1

Sie können Ihre zusätzliche Logik oder Berechnungen in onChange Methode setzen, dass, nachdem alle Komponenten des gebundenen Eigenschaften genannt wird sind aktualisiert.

@Component({ 
    selector: 'child', 
    properties : ['model'] 
}) 
@View({ 
    template: ` 
     <p>Child {{ model }}</p> 
    `, 
}) 
class Child { 
    model: number; 

    onChange(map){ 
     if(map.model) { 
     console.log('doing crazy stuff here'); 
     console.log(map.model); //SimpleChange {previousValue: 43, currentValue: 44} 
     } 
    } 
} 

Plunker

Answer 2

Sie können getters und setters verwenden, um es zu verwalten. Für Ihr Beispiel Child Komponente muss so ausgesehen werden:

@Component({ 
    selector: 'child', 
    properties : ['model'] 
}) 
@View({ 
    template: ` 
    <p>Child {{ model }}</p> 
    `, 
}) 
class Child { 
    _model: number; 

    set model(newModelValue) { 
    // Here we are 
    console.log('new model value: ' + newModelValue) 
    this._model = newModelValue; 
    } 

    get model() { 
    return this._model; 
    } 
} 

Hier ist die plunker für Ihren Fall ist