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

【问题标题】：how can i determine which button was clicked in angular material dialog我如何确定在角度材料对话框中单击了哪个按钮
【发布时间】：2018-05-03 08:12:20
【问题描述】：

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 但无论我点击什么按钮它都会运行。

【问题讨论】：

标签： javascript angular typescript angular-material angular-material2

【解决方案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();
}

【讨论】：

是的，这正是要走的路

【解决方案2】：

您好，我注意到您使用的是 angular.material 中完全相同的示例。您要求的选项需要您自己根据您的目的处理。如那里的示例所示。 my example

onNoClick() 和 onOkClick() 在这里完成了工作在组件ts中添加函数并绑定到组件html中

对话框组件 TS

export class DialogOverviewExampleDialog {

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

  onNoClick(): void {
    alert("You clicked no.")
    this.dialogRef.close();

  }
  onOkClick():void{

    alert("You clicked Ok");
  }
}

对话框组件 HTML

<h1 mat-dialog-title>Hi {{data.name}}</h1>
<div mat-dialog-content>
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput tabindex="1" [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onOkClick()" [mat-dialog-close]="data.animal" tabindex="2">Ok</button>
  <button mat-button (click)="onNoClick()" tabindex="-1">No Thanks</button>
</div>

【讨论】：

【解决方案3】：

您可以使用单个function 做到这一点，无需为更多按钮添加功能

像这样：

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

clickBtn(status) {
    if(status)
        console.log('Ok button clicked');
    else 
        console.log('No button clicked');    
    this.dialogRef.close();
}

【讨论】：

老兄.. 我们都知道所有这些都是一样的。但是有一个编码标准说写一个函数来做一件事。编写第二个函数来处理第二个工作。它更具可读性。所以请不要遵循这种做法
重要的是函数，对于单行代码，最好不要为每个函数创建函数，您也可以从单个函数调用，这是有标准的，直到您的代码可读为止。
你真的认为如果PO问这个问题，他不会想在那里做业务逻辑并写一个单行吗？

【解决方案4】：

<button  mat-button  (click)="onNoClick()"  [mat-dialog-close]="data.SelectedBtn">No Thanks</button>
  <button  mat-button  (click)="onOkClick()"  [mat-dialog-close]="data.SelectedBtn" cdkFocusInitial>Ok</button>


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

 constructor(
public dialogRef: MatDialogRef<DialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: DialogData) { }

 onNoClick(): void {
this.data.SelectedBtn = false;
this.dialogRef.close(this.data.SelectedBtn);
}

onOkClick(): void {
  this.data.SelectedBtn = true;
  this.dialogRef.close(this.data.SelectedBtn);
}


}

【讨论】：