关闭后对话框中的事件发射器订阅父级

Question

我想在关闭 material 对话框后发出一个事件，但不起作用（可能是因为 angular 代码超出了区域？）。

如果我尝试这样做，效果很好（事件已正确附加到 html 父级）：

onClick(){
   this.actionEmitter.emit(result);
}

但是如果我把这段代码放在 afterClosed 事件中：

    dialogRef.afterClosed().subscribe(result => {
        this.actionEmitter.emit(result);
    });

没用。没有显示错误，但事件就此停止。我该如何解决？

Answer 1

终于找到问题了。这不是区域外的问题。组件的层次结构是这样的：

父项：项目列表
子项：带有 mouseleave 和 mouseover 的项目，用于显示打开对话框的操作按钮
对话

发生的事情是当鼠标进入项目时打开对话框，此时失去焦点并且html showOperations 为假。 actionEmitter 不再存在。

 <div  (mouseenter)="showOperations=true" (mouseleave)="showOperations=false">

      <!-- item something -->

      <child-component *ngIf="showOperations" (actionEmitter)="action($event)"></child-component>
 </div>

我用 [hidden] 而不是 *ngIf:

解决了

 <child-component [hidden]="!showOperations" (actionEmitter)="action($event)"></child-component>

关闭后对话框中的事件发射器订阅父级

Event emitter from dialog afterClosed subscribe to the parent

dialog

zone

eventemitter

angular-material

angular5