Angular组件路由切换时如何取消订阅Observable？

嘿，这个问题我太熟悉了！在Angular里处理路由切换时的Observable订阅清理，尤其是滚动事件这种全局监听，可是避免内存泄漏的关键。结合你的scrolling-component同时服务于intro和start两个路由的场景，给你几个实用的解决方案：

默认情况下，路由切换时旧的组件实例会被销毁，所以在组件的ngOnDestroy钩子中手动取消订阅是最直接的方式。

步骤如下：

1. 先把Observable.fromEvent的订阅对象存到一个Subscription变量中
2. 在组件销毁时调用unsubscribe()清理订阅

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription, fromEvent } from 'rxjs';

@Component({
  selector: 'app-scrolling',
  templateUrl: './scrolling.component.html'
})
export class ScrollingComponent implements OnInit, OnDestroy {
  private scrollSubscription: Subscription | undefined;

  ngOnInit() {
    // 订阅滚动事件
    this.scrollSubscription = fromEvent(window, 'scroll').subscribe(() => {
      // 你的滚动吸附逻辑代码
      console.log('处理滚动吸附');
    });
  }

  ngOnDestroy() {
    // 路由切换时组件销毁，自动执行这里清理订阅
    if (this.scrollSubscription) {
      this.scrollSubscription.unsubscribe();
    }
  }
}

这样当你从intro路由切换到start路由时，旧的scrolling-component实例会被销毁，ngOnDestroy触发，滚动事件的订阅就会被彻底清理。

如果你的滚动逻辑可以和模板数据绑定结合，用Angular内置的async管道会更省心——它会自动在组件销毁时取消订阅，不用手动写unsubscribe()。

示例代码：

import { Component } from '@angular/core';
import { fromEvent } from 'rxjs';
import { map, debounceTime } from 'rxjs/operators';

@Component({
  selector: 'app-scrolling',
  template: `
    <div class="scroll-indicator">
      当前滚动位置：{{ scrollPos$ | async }}px
    </div>
  `
})
export class ScrollingComponent {
  // 把滚动事件转换成可观察对象，供模板使用
  scrollPos$ = fromEvent(window, 'scroll').pipe(
    debounceTime(100), // 防抖优化，减少触发频率
    map(() => window.scrollY)
  );
}

不过这个方案更适合以数据绑定为主的场景，如果你的滚动吸附是直接操作DOM的复杂逻辑，方案一可能更适配。

如果你的项目用了RouteReuseStrategy（路由复用策略），组件实例不会在路由切换时被销毁，这时候ngOnDestroy就不会触发。这种情况下可以监听路由事件，在离开目标路由时清理订阅：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Subscription, fromEvent } from 'rxjs';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-scrolling',
  templateUrl: './scrolling.component.html'
})
export class ScrollingComponent implements OnInit, OnDestroy {
  private scrollSubscription: Subscription | undefined;
  private routerSubscription: Subscription | undefined;

  constructor(private router: Router) {}

  ngOnInit() {
    this.scrollSubscription = fromEvent(window, 'scroll').subscribe(() => {
      // 滚动吸附逻辑
    });

    // 监听路由切换事件
    this.routerSubscription = this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      // 判断是否离开了intro或start路由，是的话清理订阅
      if (!event.url.includes('intro') && !event.url.includes('start')) {
        this.scrollSubscription?.unsubscribe();
      }
    });
  }

  ngOnDestroy() {
    // 清理路由事件的订阅
    this.routerSubscription?.unsubscribe();
  }
}

滚动事件触发频率极高，建议加上debounceTime操作符做防抖处理，既能提升性能，也能减少不必要的逻辑执行（比如上面方案二里的示例）。

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