是否需要取消订阅Angular Router的events可观察对象？

需要取消订阅，原因如下：

• Router 是Angular应用中的全局单例服务，它的events流是全局持续推送事件的，不会随组件的销毁而自动停止推送。
• 与之不同，ActivatedRoute的可观察对象（如params、queryParams）是与当前路由组件的生命周期绑定的，Angular会在组件销毁时自动清理这些订阅，所以无需手动取消。

如果不手动取消router.events的订阅，当组件销毁后，订阅的回调函数依然会被执行，最终会导致内存泄漏。

推荐的取消订阅方式 #

方式1：保存订阅对象，在ngOnDestroy中取消

import { Component, OnDestroy } from '@angular/core';
import { Router, Event, NavigationEnd } from '@angular/router';
import { Subscription } from 'rxjs';

@Component({
  // 组件元数据
})
export class YourComponent implements OnDestroy {
  private routerSubscription!: Subscription;

  constructor(private readonly router: Router) {
    this.routerSubscription = this.router.events.subscribe((event: Event) => {
      if (event instanceof NavigationEnd) {
        // 你的业务逻辑
      }
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅
    this.routerSubscription.unsubscribe();
  }
}

方式2：使用takeUntil操作符（多订阅场景更高效）

import { Component, OnDestroy } from '@angular/core';
import { Router, Event, NavigationEnd } from '@angular/router';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  // 组件元数据
})
export class YourComponent implements OnDestroy {
  private destroy$ = new Subject<void>();

  constructor(private readonly router: Router) {
    this.router.events.pipe(
      takeUntil(this.destroy$)
    ).subscribe((event: Event) => {
      if (event instanceof NavigationEnd) {
        // 你的业务逻辑
      }
    });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

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