Angular（v5.2.2）Location服务事件取消订阅问题

嘿，我来帮你搞定这个问题！你遇到的情况是因为组件销毁时没有正确取消Location事件的订阅，导致订阅仍然挂在内存里，哪怕组件已经卸载，URL变化时还是会触发回调。下面是具体的解决步骤：

核心思路 #

Angular的Location.subscribe()会返回一个Subscription对象，我们需要把这个订阅实例保存下来，然后在组件的ngOnDestroy生命周期钩子中调用它的unsubscribe()方法，这样就能在组件销毁时彻底终止订阅。

具体代码实现 #

1. 导入必要的模块 #

首先在组件文件顶部导入需要的依赖：

import { Component, OnDestroy } from '@angular/core';
import { Location } from '@angular/common';
import { Subscription } from 'rxjs/Subscription'; // Angular 5.x 对应的Subscription路径

2. 保存订阅并在销毁时取消 #

在组件类中实现OnDestroy接口，保存订阅实例，然后在销毁钩子中取消订阅：

@Component({
  selector: 'your-target-component',
  templateUrl: './your-target-component.component.html'
})
export class YourTargetComponent implements OnDestroy {
  // 声明变量保存订阅实例
  private locationSub: Subscription;

  constructor(private location: Location) {
    // 订阅Location事件并保存实例
    this.locationSub = this.location.subscribe((locationState) => {
      // 这里是你原来的URL变化处理逻辑
      console.log('URL发生变化:', locationState);
    });
  }

  // 组件销毁时触发的钩子
  ngOnDestroy(): void {
    // 检查订阅存在后取消，避免空指针
    if (this.locationSub) {
      this.locationSub.unsubscribe();
    }
  }
}

为什么这样有效？ #

当组件被销毁时，Angular会自动调用ngOnDestroy钩子，此时我们调用unsubscribe()会终止订阅关系，后续的URL变化就不会再触发组件里的回调代码了，同时也能避免内存泄漏问题。

内容的提问来源于stack exchange，提问作者Guy