Angular

Question

我的一位同事问我是否需要取消订阅对话框的 afterClosed() Observable。

我们正在使用 takeUntil 模式取消订阅 ngOnDestroy() 上的所有 Observables。

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

问得好，刚刚看了文档 (https://material.angular.io/components/dialog/overview)，似乎没有任何迹象表明需要退订，您已经拥有的就足够了。

Answer 2

没有

您不需要取消订阅，因为 observable 本身 completes.You 可以通过添加一个 finalize 块来验证是否 observable 完成自身。

import { finalize } from "rxjs/operators";

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

当您关闭对话框时，您会在控制台中看到 completed，这表明 您不需要取消订阅 observable。

Answer 3

当订阅块使用 this.xxxx 组件属性.

时，您通常希望取消订阅可观察对象以防止内存泄漏和错误

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

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

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

Angular - DialogRef - 取消订阅 - 我需要取消订阅 afterClosed 吗？

Angular - DialogRef - Unsubscribe - Do I need to unsubscribe from afterClosed?

unsubscribe

rxjs

没有