单击按钮时如何禁用按钮以关闭其对话框？

Question

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

尝试了此操作，但没有成功：[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>

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

Answer 1

请您分享打字稿代码。 我认为您应该删除此部分 this.dialogRef.close（）; 在出现的控制器中 在这里您找到并举例:) https://material.angular.io/components/dialog/examples

Answer 2

好吧； mat-dialog-close是一个Angular Directive，它期望数据能够传递到主机组件。

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

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

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

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

我希望这能帮助您理解我的观点。