events - 通知子组件有关 Angular2 的更改

Question

假设我有一个简单的 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;
}

我通过 Angular 的 [property] 语法将 model 从 parent 组件传递给 child数据绑定(bind)。因此，如果我想跟踪 parent 中 model 的一些更改，我可以轻松地将事件添加到 child 并通过 (event ) 语法跟踪“parent”中的变化。那么当 parent 更改 model 并且 child 想要收到通知时，我该如何实现相反的情况呢？

Answer 1

您可以使用 getters和 setters来管理它。对于您的示例 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适合你的情况