如何订阅afterClosed后的angularMaterial Dialog？

Question

关于关闭对话框。 https://material.angular.io/components/component/dialog afterClosed不值得吗？

与官方主要文件一样：

错误

Property 'then' does not exist on type '() => Observable<any>'. [default] Checking finished with 1 errors

我尝试订阅，但也无效。

Answer 1

基于<{3}}

的示例部分

let dialogRef = this.dialog.open(DialogResultExampleDialog);

dialogRef.afterClosed().subscribe(result => {
  this.selectedOption = result;
});

但是如果需要，你总是可以将结果转换为承诺

dialogRef.afterClosed().toPromise()

不要忘记添加toPromise支持

import "rxjs/add/operator/toPromise";

Answer 2

https://material.angular.io/components/component/dialog

afterClosed 方法会返回可观察，因此不会像 Promise 对象一样。

为避免在可观察上使用 toPromise 方法，您可以使用 take（1）取消订阅自动第一个事件：

dialogRef.afterClosed().take(1).subscribe(result => {
  console.log(`Dialog result: ${result}`); // Pizza!
});

Answer 3

afterClosed()无需取消订阅，因为它会自动完成： https://github.com/angular/material2/blob/ae41a0ad69ca26c600f0f56c68dd5a1c102d4f1f/src/lib/dialog/dialog-ref.ts#L75

Answer 4

您也可以使用first（）RxJs运算符代替take（1）。以我个人的观点，它看起来更好（尽管它们也一样）。

dialogRef.afterClosed().first().subscribe(result => {
console.log(`Dialog result: ${result}`);
});