RxJS：Angular中无unsubscribe方法的Observable如何取消订阅？

错误原因 #

WindowListener$是Observable实例，Observable本身没有unsubscribe()方法——这个方法属于调用subscribe()后返回的Subscription对象，和Angular版本无关，之前的操作其实是误写。

几种取消订阅的正确方式 #

1. 保存Subscription实例手动取消

这是最直接的方式，把订阅返回的对象存起来，在组件销毁时调用unsubscribe()：

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

export class MyComponent implements OnInit, OnDestroy{
    WindowListener$: Observable<Event> = fromEvent(window, 'resize');
    private resizeSubscription!: Subscription;

    ngOnInit(): void{
         // 保存订阅返回的Subscription对象
         this.resizeSubscription = this.WindowListener$.subscribe(() => this.readWindowSize());
    }

    ngOnDestroy(): void {
        // 调用Subscription的unsubscribe方法
        this.resizeSubscription.unsubscribe();
    }

    readWindowSize(): void {
        // 你的窗口尺寸读取逻辑
    }
}

2. 使用async管道（推荐）

Angular的async管道会自动管理订阅：当组件销毁时，管道会自动取消订阅，无需手动操作。

• 组件类中可以添加操作符优化事件触发（比如防抖）：

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

export class MyComponent implements OnInit{
    WindowListener$: Observable<Event> = fromEvent(window, 'resize').pipe(
        debounceTime(100), // 防抖100ms，避免频繁触发
        tap(() => this.readWindowSize()) // 触发尺寸读取方法
    );

    readWindowSize(): void {
        // 你的窗口尺寸读取逻辑
    }
}

• 模板中通过async管道订阅（可以用隐藏元素实现，无需显示内容）：

<!-- 隐藏的订阅，让async管道自动管理 -->
<div *ngIf="WindowListener$ | async"></div>

3. 使用takeUntil操作符（多订阅场景）

如果组件有多个需要取消的订阅，可以用takeUntil统一管理：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { fromEvent, Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

export class MyComponent implements OnInit, OnDestroy{
    // 创建一个用于通知取消订阅的Subject
    private destroy$ = new Subject<void>();

    ngOnInit(): void{
        fromEvent(window, 'resize').pipe(
            takeUntil(this.destroy$) // 当destroy$发出值时，自动取消订阅
        ).subscribe(() => this.readWindowSize());

        // 其他需要取消的订阅也可以用同样的方式
        // someOtherObservable$.pipe(takeUntil(this.destroy$)).subscribe(...);
    }

    ngOnDestroy(): void {
        // 发出取消信号并完成Subject
        this.destroy$.next();
        this.destroy$.complete();
    }

    readWindowSize(): void {
        // 你的窗口尺寸读取逻辑
    }
}

关于Angular自动处理订阅的说明 #

Angular只会自动处理通过async管道订阅的Observable，手动调用subscribe()创建的订阅，必须手动取消，否则会导致内存泄漏。

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