Уведомлять дочерний компонент об изменениях в Angular2

Предположим, что у меня есть простой компонент Angular2

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

поскольку вы можете видеть, что он использует другой простой компонент

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

Я передаю model из компонента parent в child через синтаксис angular [property] для привязки данных. Поэтому, если я хочу отслеживать некоторые изменения model в parent, я могу легко добавить событие в child и через синтаксический трек (event) изменений в "parent". Итак, как я могу реализовать противоположную ситуацию, когда изменения parent model и child хотят получать уведомление?

Ответ 1

Вы можете поместить свою дополнительную логику или вычисления в метод onChange, который вызывается после обновления свойств связанных сторон.

@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

Ответ 2

Вы можете использовать getters и сеттеры для управления им. Для вашего примера Child компонент должен выглядеть следующим образом:

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

Вот plunker для вашего случая