材料模态异常行为

Question

在此处输入图像描述我使用的是有角度的材料，下面的代码是模态的。问题是，每当我单击Cancel按钮时，getSelectedCommittees也会被执行。

<div fxLayout="direction" fxLayoutAlign="center center">
<button mat-button class="act-button outline modal-blue-outline" 
[mat-dialog-close]="getSelectedCommittees()">OK</button>
<button mat-button class="act-button outline modal-blue-outline" 
[mat-dialog-close]="true"> Cancel </button>

我不明白为什么会发生这种事。有人能帮我吗？？

提前感谢

Answer 1

正如官方对话框文档所说，
"将关闭当前对话框的按钮"。
它是对话框组件的一个输入属性，如@Input('mat-dialog-close')所示

如果单击对话框，mat-dialog-close将始终关闭对话框，无论您为其指定什么值。如果您想控制关闭逻辑，请使用(click)="seeIfCloseableOrNot()"
mat-dialog-close是一个属性，它将执行添加的工作，mat-dialog-close的功能是关闭对话框。

您可以使用分配给mat-dialog-close的值，使用dialogRef.afterClosed()
另请参阅：https://github.com/angular/material2/issues/9298
因为将某个方法附加到CCD_ 9将由于变化检测而多次调用它。

参见与matDialogClose 相关的函数的多次调用演示

Answer 2

替换：

<button mat-button class="act-button outline modal-blue-outline" 
[mat-dialog-close]="getSelectedCommittees()">OK</button>

签字人：

<button mat-button
type="submit" 
(click)="getSelectedCommittees()"
class="act-button outline modal-blue-outline">
OK
</button>

您可以关闭getSelectedCommittes功能中的对话框：

getSelectedCommittess() {
// Some code...
this.dialogRef.close();
}

Answer 3

问题是[mat-dialog-close]="getSelectedCommittees()"。

这是另一种选择HTML文件

<div fxLayout="direction" fxLayoutAlign="center center">
<button mat-button class="act-button outline modal-blue-outline" 
(click)="getSelectedCommittees()">OK</button>
<button mat-button class="act-button outline modal-blue-outline" 
[mat-dialog-close]="true"> Cancel </button>

TS文件

getSelectedCommittess() {
// Things you want to perform
// etc etc 
this.dialogRef.close(); // this method will close the dialog or model
// after your operations where dialogRef is 
// the name of your reference variable
}

供参考https://material.angular.io/components/dialog/api