javascript - Angular Location.onUrlChange 如何正确取消订阅

Question

Angular 的位置服务有一个方法 onUrlChange ，它可以注册 popstate 或 hashchange 没有的 url 事件，我的项目的一部分需要它。

  /**
   * Registers a URL change listener. Use to catch updates performed by the Angular
   * framework that are not detectible through "popstate" or "hashchange" events.
   *
   * @param fn The change handler function, which take a URL and a location history state.
   */
  onUrlChange(fn: (url: string, state: unknown) => void) {
    this._urlChangeListeners.push(fn);
    this.subscribe(v => { this._notifyUrlChangeListeners(v.url, v.state); });
  }

与通常情况不同，没有返回订阅，因此我们无法在销毁时取消订阅。在离开需要监听这些事件的路线后，监听器仍然完好无损。

目前我丑陋的黑客是过滤 Location 的私有(private) _urlChangeListeners onDestroy，但这依赖于 String(fn) !== '(change) => this.urlFileHandler(change)' 显然不是一个好方法。

是否有其他可能性从监听器中删除该监听器？

Answer 1

这并不是问题的答案，但我决定订阅一次并使用可观察的。例如:

  import { Location } from '@angular/common';

  export class MyService {
    public urlChanged = new Subject();

    constructor(private location: Location) {
      // This is a shared service so the code only gets called once
      location.onUrlChange((url, state) => {
        this.urlChanged.next({ url, state });
      });
    }
 }

然后按正常方式订阅，例如:

  private sub;

  ngOnInit() {
    this.sub = this.myService.urlChanged.subscribe(e => {
      //Do stuff
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }