Segnalatemi componente figlio cambiamenti in Angular2

Question

Supponiamo che io sono semplice componente Angular2

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

come si può vedere che usa un altro semplice componente

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

sto passando model dal componente parent al child attraverso la sintassi [property] dell'angolare per l'associazione dati. Quindi, se voglio tenere traccia delle modifiche di nel parent, posso facilmente aggiungere un evento allo child e tramite la sintassi (event) le modifiche nel "genitore". Quindi, come posso implementare la situazione opposta quando parent cambia model e child vuoi essere avvisato?

Answer 1

Si può mettere la logica aggiuntiva o calcoli in onChange metodo, che si chiama, dopo tutte le proprietà bound del componente sono aggiornati.

@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

È possibile utilizzare getters e setters per gestirlo. Per il vostro esempio Child componente deve essere guardato come questo:

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

Ecco la plunker per il vostro caso