我如何确定在角度材质对话框中单击了哪个按钮

Question

import {Component, Inject} from '@angular/core';
import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';

/**
 * @title Dialog Overview
 */
@Component({
  selector: 'dialog-overview-example',
  templateUrl: 'dialog-overview-example.html'
})
export class DialogOverviewExample {

  animal: string;
  name: string;

  constructor(public dialog: MdDialog) {}

  openDialog(): void {
    let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: { name: this.name, animal: this.animal }
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animal = result;
    });
  }

}

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

  constructor(
    public dialogRef: MdDialogRef<DialogOverviewExampleDialog>,
    @Inject(MD_DIALOG_DATA) public data: any) { }

  onNoClick(): void {
    this.dialogRef.close();
  }

}

假设我有上面的代码。结果如下所示：

基于这张图片，我如何确定用户是点击了确定还是不，谢谢。我想为每个事件创建一个函数。尝试过 dialogRefAfterClose 但无论我单击什么按钮它都会运行。

Answer 1

在您的对话框 html，dialog-overview-example-dialog.html 中，您可以在两个按钮中添加（单击）事件。

<div mat-dialog-actions>
  <button mat-button (click)="clickOK()" tabindex="2">Ok</button>
  <button mat-button (click)="clickNo()" tabindex="-1">No Thanks</button>
</div>

您可以以编程方式关闭对话框：

clickNo() {
    console.log('No button clicked');
    this.dialogRef.close();
}
clickOk() {
    console.log('Ok button clicked');
    this.dialogRef.close();
}