Angular Material 对话框 - 关闭时发送数据答案

【问题标题】：Angular Material dialog - send data when closeAngular Material 对话框 - 关闭时发送数据
【发布时间】：2018-11-07 08:11:06
【问题描述】：

有没有办法在对话框关闭时将数据从对话框发送到“父级”（即使用户点击外部或按 ESC）？

目前我有一个父母：

家长：

open(){
    const dialogRef = this.dialog.open(ModalinvitarComponent, {
      width: '90%',
      maxWidth: '520px'
    });
    dialogRef.afterClosed().subscribe(result => {
      console.log(result)
    });
}

当模态关闭时结果“未定义”

我可以使用以下方式从模态发送一些数据：

this.dialogRef.close(true)

然后我得到“true”作为响应，但即使用户关闭模式，点击模式外或按 ESC，我也想发送数据。

我在模态框内有一个变量，我想接收它，无论用户关闭模态框的方式如何。

【问题讨论】：

那么afterClosed Observable 不会触发吗？
数据在用户用ESC关闭对话框或点击外部时发送，它是一个空字符串。
afterClosed 被触发，但当用户使用默认选项（单击外部或按 ESC）关闭模式时，我不知道如何将数据从对话框发送到“结果”

标签： angular typescript dialog

【解决方案1】：

如果您想更改默认数据，请按照以下步骤操作。

dialogRef.afterClosed().pipe(
  map(result => !result ? 'Default data' : result),
).subscribe(...);

此测试将测试虚假值（''、undefined、null、0 ...），并且由于对话框的默认返回值是''，因此它将替换为@ 987654329@。

【讨论】：

问题是当用户更改模态中的数据，然后关闭模态点击外部。我没有在父级中收到此更改，因此数据在不应该时将是默认值
那是另一个问题，与这个完全无关。我建议您使用minimal reproducible example 创建一个问题。
其实是主要问题
我不怀疑，我的意思是你在原来的问题中没有这么说，你解释了一个完全不同的问题。因此，再次考虑使用 minimal reproducible example 创建一个新问题来重现此特定问题。

【解决方案2】：

今天我也遇到了同样的问题，我的解决方法：服务和rxjs：

// service.ts
@Injectable({
  providedIn: 'root'
})
export class ComunicationService {
  observedEvent$ = new Subject<ISomeInterface>();
  constructor() { }
  eventOcurs(some_object: ISomeInterface) {
    observedEvent$.next(some_object);
  }
}

然后在对话框组件中（ComunicationService 作为 comunicationService 注入）我正在监视一些事件并将重要对象触发到观察到的流中：

// dialog-component.ts
this.comunicationService.eventOcurs(some_object);

父组件（CommunicationService 作为 comunicationService 注入）正在订阅更改：

// parent-component.ts
this.comunicationService.observedEvent$.subscribe((some_object) => {
  //some action
})

使用服务，您可以随心所欲地进行任何更改。这种方法的好处是父组件对背景的变化做出反应，当我关闭对话框时，所有的变化都已经在父组件中提供了。

【讨论】：