材料模态异常行为

Question

enter image description here我正在使用角度材料，下面的代码是模态的。问题是每当我点击取消按钮时，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

正如Official Dialog Doc所说， “将关闭当前对话框的按钮”。 它是Dialog Component的输入属性，如@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 由于改变检测，将一些方法附加到mat-dialog-close会多次调用它。

See Demo with multiple call of function associated with 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