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

Posted 2023-03-13

【中文标题】我如何确定在角度材料对话框中单击了哪个按钮

【英文标题】：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 但无论我点击什么按钮它都会运行。

【参考方案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);