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

替换：

<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 2

问题是 [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

Answer 3

如 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

物质模态异常行为

3 个答案: