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

我通过角度model语法将parent组件从child组件传递到[property]以进行数据绑定。因此，如果我想跟踪model中parent的某些更改，我可以轻松地将事件添加到child，并通过(event)语法跟踪“父级”中的更改。那么，当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

Answer 2

您可以将其他逻辑或计算放入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

通知子组件有关Angular2

2 个答案: