父/子组件交互 - 使用EventEmitter angular2返回值

Question

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

参见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仍未定义。有几种方法可以让它发挥作用。

1. 服务
2. 实施ngOnChanges()

以下是后者的一个例子：

1. 从()
中删除[(callBackCancelled)]
2. 实现以下内容：https://plnkr.co/edit/qDG0dK01USbN1ifVFXvl?p=info