0

我从 http 请求中接收到一些数据，我想通过 @Output 和 EventEmitter 将这些数据中继到父组件。我的目标是在子组件中新建一个item，在后端成功存储后，追加一个在后端创建的Id，追加到frontEnd中的item，最后添加到父view。

我尝试从.finally()回调和.onComplete()以及onNext() 内部调用this.newItem.emit(item )。在所有情况下，事件都没有在父组件中被捕获，除非我在.subscribe()块之后立即发出项目

child.ts
/* */
@Output() newItemEmitter= new EventEmitter();
/* */
saveItem() {
 let itemToView: {
  ... // A lot of data   
 };
 this.itemService.saveItem(item).subscribe(result => {
    itemToView = {
     ...
     Id: result.Data
    }
   }, error => {console.log(error)}
   , () => { console.log('Emitting!'); this.newItemEmitter.emit(itemToView) }
 }
 this.closeView() // Was not originally included. (1)
}
// this.newItemEmitter.emit(itemToView) // If emitting from  
// here, itemToView will not contain the right Id from the backend.

我故意省略了一些不相关的 html。

parent.html
<ng-template  let-c="close" let-d="dismiss">
  <fixed-item  (newItemEmitter)="addNewItemToView($event)" (closed)="closeAddNewItemTemplateView()">
  </fixed-item>
</ng-template>

parent.ts
addNewItemToView($event) {
    console.log('Received event from child: ', $event)
    // Add to view here
}

我的预期输出是Emitting！其次是收到来自孩子的事件，但截至目前，唯一的输出是Emitting！.

编辑：（1）：删除this.closeView()为我解决了这个问题。我认为问题在于事件在 ng-template 关闭时被中止。

4

1 回答 1

0

我的问题是当我调用this.closeView()来关闭组件时。我现在从父组件调用 destroy 方法，而不是从子组件本身关闭子组件。我相信如果事件的源在订阅回调中，调用this.closeView()会以某种方式从事件循环中删除发出的事件。

于 2019-05-08T06:27:34.547 回答