Angular：如何在通过单击对话框外部关闭 Mat 对话框时定义默认值

Question

当通过单击对话框外部关闭对话框时，我想发出一个默认值。目前它发出undefined这在许多情况下都可以，但我想在通过单击外部中止对话框时发出一个默认值。

我如何实现这种行为？

这是一个实际示例：https : //material.angular.io/components/dialog/examples

1. 打开对话框。
2. 在对话框中输入一些东西。
3. 再打开。
4. 单击它的外部并查看消失的值

我希望它表现如何？

通过单击外部关闭对话框时，它应该始终显示一些值。

Answer 1

使用当叠加层的背景被点击时发出的背景点击 observable

然后使用 MatDialogRef 实例访问接受可选参数的 close 方法。用它来提供价值

尝试这个

组件.ts

dialogRef.backdropClick().subscribe(v=>{
      dialogRef.close('Hello!');
 });

 dialogRef.afterClosed().subscribe(result => {
  console.log('The dialog was closed');
  this.animal = result;
 });

例子

Answer 2

根据示例，您可以添加 OR 运算符：

dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animal = result || defaultValue;
    });