Angular语言 - 对话引用 - 取消订阅 - 我需要取消订阅 afterClosed 吗?

Question

我的一位同事问我是否需要取消订阅对话框的afterClosed((可观察性。

我们使用takeTill 模式取消订阅 ngOnDestroy(( 上的所有可观察量。

this.backEvent = fromEvent(window, 'popstate')
.pipe(
takeUntil(this.destroy$)
)
.subscribe(
() => {
this.navigationService.backClicked = true;
this.navigationService.navigateBackToDirectoryCenter();
}
);

ngOnDestroy((

ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}

那么是否有必要取消订阅 afterClosed(( Observable？

dialogRef.afterClosed().subscribe(
(data) => {
console.log(data);
}
},
);

或？

dialogRef.afterClosed()
.pipe(
takeUntil(this.destroy$)
)
.subscribe(
(data) => {
console.log(data);
},
);

Answer 1

否

您无需在可观察量本身完成时取消订阅。您可以通过添加 finalize 块来验证这一点，以查看可观察量是否自行完成。

import { finalize } from "rxjs/operators";

dialogRef
.afterClosed()
.pipe(finalize(() => console.log("completed")))
.subscribe(data => {
console.log(data);
});

当您关闭对话框时，您将在控制台中看到completed，这表明您无需取消订阅可观察量。

Answer 2

当订阅块使用this.xxxx组件属性时，您通常希望取消订阅可观察量以防止内存泄漏并防止错误。

即使订阅完成并且您不需要考虑内存泄漏，您也应该注意第二个问题。

调用dialogRef.afterClosed()的主机组件可能会在对话框仍然可见时被销毁。订阅将在关闭后发出，当您访问订阅块内的组件属性时，它会引发错误。

我认为这是一种罕见的情况，当对话框处于活动状态时主机组件被破坏，但我想指出这种边缘情况。 例如，浮动按钮可以打开对话框，但在滚动或其他情况后消失。

Answer 3

好问题，刚刚看了一下文档(https://material.angular.io/components/dialog/overview(，似乎没有任何迹象表明需要取消订阅，您已经拥有的应该足够了。

Answer 4

您可以通过在订阅调用中设置完整的回调来自己测试这一点。我很久以前就测试了这一点，以确认这里的其他人在说什么;不，您无需担心取消订阅。无论如何，对此进行测试都是一种众所周知的做法。

observable.subscribe(
(value) => { ... },
(error) => { ... },
() => { console.log('complete!'); }
);