Question

我从http请求接收一些数据，该数据要通过@Output和EventEmitter中继到父组件。我的目标是在子组件中创建一个新项目，并将其成功存储在后端后，在后端添加一个创建的ID，将其添加到frontEnd中的项目，最后将其添加到父视图中。

我尝试从 .finally（）回调和 .onComplete（）内部调用 this.newItem.emit（item） ，以及我们 onNext（）。在所有情况下，事件都没有被捕获到父组件中，除了我在 .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关闭时被中止。

Answer 1

我的问题是当我调用 this.closeView（）关闭组件时。现在，我不再从子组件本身关闭子组件，而是从父组件调用destroy方法。我相信，如果事件源在 subscribe 回调中，则调用 this.closeView（）会从事件循环中删除发出的事件。

从rxJs触发onComplete回调时未捕获事件

1 个答案: