Parent/Child 组件交互 - Return 值使用 EventEmitter angular2

Question

1) 我有一个使用@Output 发出事件的子组件 (CounterComponent) 2）子组件还有一个Input参数callBackCancelled。 3) 父组件 (AppComponent) 将 callBackCancelled 值设置为 "true" 但在子组件中该值仍未定义。

查看 plunker 示例 https://plnkr.co/edit/2vnTUEDyBKT59GDTvkEJ

callbackFunction(e) {
alert('emitting event from child callback button component');
this.callback.emit(e);

alert('Now in child component, this value should be true, but it is:  ' + this.callBackCancelled);

}

有人可以帮忙吗？

Answer 1

实际上，这个 alert('Now in child component, this value should be true, but it is: ' + this.callBackCancelled); 在以下调用之前被调用：

btncallback(event) {
    console.log(event);
    this.callBackCancelled = event;
    alert('Parent component sets the callBackCancelled value to true.');
  }

所以到那时，this.callBackCancelled 仍未定义。有几种方法可以让它发挥作用。

一项服务
实施ngOnChanges()

这是后者的一个例子：

从 [(callBackCancelled)]

()

执行以下操作：https://plnkr.co/edit/qDG0dK01USbN1ifVFXvl?p=info

Parent/Child 组件交互 - Return 值使用 EventEmitter angular2

Parent/Child Component Interaction - Return values using EventEmitter angular2

eventemitter

angular