Question

我有一个包含NgModal弹出窗口的角度组件。

我正在订阅组件中的ngrx商店。

永远不会调用组件的ngOnDestroy，因为永远不会调用新路由。

用户通过模态弹出窗口添加新用户。

对“用户”状态的商店的订阅（选择）永远不会取消订阅并且被多次调用。

从未调用过ngOnDestroy（）时，从store.select（）处理取消订阅的最佳方法是什么？

Answer 1

解决此问题的最简单方法是不要在组件中subscribe，而应通过async管道在模板中执行此操作。

来自Angular Docs：

异步管道订阅到Observable或Promise，并返回其发出的最新值。发出新值时，异步管道会将要检查的组件标记为更改。当组件被销毁时，异步管道会自动取消订阅，以避免潜在的内存泄漏（添加了重点）。

由于您没有提到ngOnDestroy，因此该组件很可能会保留并根据需要隐藏/显示，在这种情况下，您将只获得单个订阅。

您还可以通过使用“异步方式”模式as explained by Todd Motto here.来阻止模板中的多个subscribe调用。基本上，当模板中需要多个async管道时，请在较高的元素上使用*ngIf="data$ | async as data"，并在下面引用已解决的data。

Answer 2

如果您不希望在不同组件中调用该订阅，则销毁 ngOnDestroy（）中的订阅非常有用

但是，如果在同一组件中多次调用订阅，则可以使用 RxJs运算符

来解决。

yourSelectorname$.pipe(skip(1)).pipe(take(1)).subscribe

或

yourSelectorname$.pipe(take(1)).subscribe

这取决于您的需要

ngrx / store subscribe被多次调用。取消订阅的最佳地点？

2 个答案: