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

Answer 2

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

在这里， onNoClick（）和 onOkClick（）完成工作在compontent 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>

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

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


}

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

4 个答案: