Header 组件正在打开 MdDialog 但需要 MdDialog 发出一个事件来告诉 Header 关闭 MdDialog

Question

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

this.dialog.closeAll()

我已经尝试在 EmailDialogComponent 的模板上收听事件，但它仍然没有 "hear the event"。

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

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

Answer 1

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

请参考我的plunker并理解EventEmitter在angular中的组件通信。

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();
  }
}

Header 组件正在打开 MdDialog 但需要 MdDialog 发出一个事件来告诉 Header 关闭 MdDialog

Header Component Opening MdDialog but need MdDialog to emit an event to tell Header to close the MdDialg

mddialog

angular-material2

angular