Question

我的应用中有一个带有下拉菜单的标题。当你点击“电子邮件”时，会弹出一个MdDialog，因为我有这个.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();
  }
}

标题组件打开MdDialog但需要MdDialog发出事件以告诉标题关闭MdDialg

1 个答案: