Angular 删除 ngDestroy 上的 locationStrategyListener

Question

我想知道为什么我的问题似乎如此重要：因为我们已经实现了服务器端查询、分页等。每当用户在表中进行更改时，我们都需要请求我们的 API（例如，当查询 name=x 客户端时）向后端发送带有相应查询参数的请求）。这也意味着我们需要在返回历史时请求后端，特别是在单击浏览器的返回按钮时。

这适用于以下代码：

constructor(private locationStrategy: LocationStrategy) { }

ngOnInit() {
    this.locationStrategy.onPopState(() => {
        this.refreshHistory();
    })
}

然而，由于在组件的每次初始化中我们都添加了一个新的监听器来监听历史事件，我们很快就会向后端发送数百个相等的请求（因为每个监听器都会调用该refreshHistory()方法）。

我不知何故需要删除ngDestroy界面中的任何 eventListener ，但locationStrategy似乎没有提供这样的功能。有没有（干净的）方法来实现这一目标？

提前致谢！

PS：如果这是一个完全错误的方法，请纠正我。我更习惯于实现后端而不是前端。

Answer 1

一旦通读了 RxJS 文档，这个解决方案实际上非常简单。我们使用它的fromEvent操作符来创建 onPopState 事件的订阅。通过此订阅，我们可以轻松取消订阅，一切都像魅力一样。

import {fromEvent, Subscription} from "rxjs";

export class CommentAllComponent implements OnInit, OnDestroy {

    private backEvent: Subscription;

    ngOnInit() {
        this.backEvent = fromEvent(window, 'popstate').subscribe(() => {
        // doCustomRefresh()
        });
    }

    ngOnDestroy(): void {
        this.backEvent.unsubscribe();
    }
}