angular - Header 组件打开 MdDialog 但需要 MdDialog 发出事件来告诉 Header 关闭 MdDialg

Question

我的应用程序中有一个带有下拉菜单的标题。当您单击“电子邮件”时，会弹出一个 MdDialog，因为我有 this.dialog.open(EmailDialogComponent)。效果很好！现在我需要单击 MdDialog 右上角的 X，它应该发出一个事件，标题模板可以监听然后运行

this.dialog.closeAll()

我试图在 EmailDialogComponent 的模板上收听事件，但它仍然没有“听到事件”。

我有@Outup closeDialog = new EventEmitter(); 然后我在 X 上有 (click)="closeEmailDialog()"。closeEmailDialog 是这个 closeEmailDialog() { this.closeDialog.emit(null); }

但这行不通。即使我在 MdDialog 模板上收听事件，它似乎也没有触发 - 有什么想法吗？

Answer 1

根据您的评论，无法理解完整的代码以及您错过的内容。

请参考我的 plunker 并了解EventEmitter角度组件通信。

https://plnkr.co/edit/zesHjCIhSjt1TxhpVdeT?p=preview

打开对话框

 @Component({
  selector: 'dialog-result-example',
  templateUrl: 'dialog-result-example.html',
})
export class DialogResultExample {
  selectedOption: string;

  constructor(public dialog: MdDialog) {}

  openDialog() {
    const dialog = this.dialog.open(DialogResultExampleDialog);
    const sub = dialog.componentInstance.formSubmit$.subscribe(() => {
      alert('hi');
    });
    dialog.afterClosed().subscribe(() => {
      sub.unsubscribe();
    });
  }
}

关闭对话框

 @Component({
  selector: 'dialog-result-example-dialog',
  templateUrl: 'dialog-result-example-dialog.html',
})
export class DialogResultExampleDialog {

   @Output() formSubmit$: EventEmitter<boolean>;

  constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {
    this.formSubmit$ = new EventEmitter();
  }

  closePop(){
    debugger;
    this.formSubmit$.emit(true);
    this.dialogRef.close();
  }
}