单击时如何禁用按钮关闭材质对话框？答案

【问题标题】：How can i disable a button from closing a material dialog when clicking it?单击时如何禁用按钮关闭材质对话框？
【发布时间】：2021-11-09 23:29:20
【问题描述】：

我有一个角材质对话框，其中包含一个按钮，我希望它执行某些操作并在对话框上显示结果而不关闭它。

试过了，但没用：[mat-dialog-close]="false"

<mat-dialog-actions align="center">
  <button class="mat-raised-button mat-primary" mat-dialog-close>back </button>
  <button mat-raised-button color="primary" (click)="lunchScraper()" [mat-dialog-close]="false">lunch scraping</button>
  <button mat-button type="submit" class="mat-raised-button mat-accent" (click)="onSubmit()">add</button>
</mat-dialog-actions>

如何禁用按钮关闭对话框？

【问题讨论】：

理论上你应该能够从 lunchScraper 按钮中删除 [matDialogClose] 属性。在实践中，正如我目前发现的那样，这没有效果..我在源 html 中看到 matdialogclose 属性仍然存在 /&%/&!%"!!! 我尝试删除缓存，但它抗性:-(

标签： angular angular-material

【解决方案1】：

好的； mat-dialog-close 是一个 Angular 指令，它期望数据传递给主机组件。

所以; [mat-dialog-close]="false" 会将 false 值作为对话框数据传递给启动此对话框的组件。

您可以通过两种方式关闭对话框：

使用mat-dialog-close：这是最简单的方法，但您无法阻止它关闭对话框，除非您禁用按钮本身。
在ts文件中使用dialogRef：通过添加一个调用dialogRef变量的close()函数的函数；并在点击按钮上调用您的函数。

我让你this dialog demo 有一个带有 2 个按钮的对话框；其中一个使用mat-dialog-close，另一个使用close 函数。

我希望这能帮助你明白我的意思。

【讨论】：

它对我不起作用。我已经尝试使用 [mat-dialog-close]="false" 但按钮仍然关闭对话框。事实上，任何按钮都会关闭对话框（exp : ）。
你应该看到这个例子了。 Mat-dialog-close 接受要发送到主机组件的结果；不要启用或禁用它。
顺便说一句；尝试使用组件函数而不是该指令；它也在示例中。

【解决方案2】：

我认为你应该删除这部分

this.dialogRef.close();

在控制器中出现

【讨论】：

【解决方案3】：

基于这个问题，我相信这个想法是提交按钮不是关闭对话框，而是手动关闭对话框。为此，请按以下步骤操作：

在提交按钮上，完全删除[mat-dialog-close]="false" 代码。
为了能够关闭对话框，请使用一个函数，然后在该函数中使用MatDialogRef，即：

constructor(private dialogRef: MatDialogRef<EditComponent>) {};

this.dialogRef.close('Pizza!');

“pizza”是对话框关闭时将发送回的数据

【讨论】：