Angular 12中RxJS使用takeWhile不配合onDestroy是否安全？

问题确认 #

你的理解是正确的，现有代码存在内存泄漏风险，并不完全安全。
takeWhile 只有在源流推送新值且判断条件返回false时，才会主动终止订阅。如果用户停留在Foo组件期间始终没有登录，fireAuthUser$ 一直推送undefined，那这个订阅会一直存活，哪怕你离开组件销毁了Foo实例，订阅也不会自动取消，会造成内存泄漏。

推荐解决方案 #

Angular生态中最通用的自动取消订阅方案是配合takeUntil操作符+组件销毁通知Subject，完全不需要修改全局的AuthService状态，具体实现如下：

1. 基础兼容版本（支持所有Angular版本），同时优化你原来的取值逻辑（用filter+take(1)替代原来的takeWhile判断complete的写法，可读性更高）：

import { Subject, takeUntil, filter, take } from 'rxjs';

export class Foo implements OnInit, OnDestroy {
    // 组件销毁通知流
    private destroy$ = new Subject<void>();

    constructor(public auth: AuthService) { }

    ngOnInit(): void {
        this.auth.fireAuthUser$.pipe(
            // 只放行非空的有效用户数据
            filter(fireAuthUser => !!fireAuthUser),
            // 拿到第一个有效值就自动结束订阅，避免后续不必要的监听
            take(1),
            // 组件销毁时，无论有没有拿到有效值，都强制终止当前订阅
            takeUntil(this.destroy$)
        ).subscribe(() => {
            this.auth.doSomeStuff();
        });
    }

    ngOnDestroy(): void {
        // 推送销毁通知，所有带takeUntil(this.destroy$)的订阅都会自动终止
        this.destroy$.next();
        this.destroy$.complete();
    }
}

2. 如果你使用的是Angular 16及以上版本，还可以用内置的DestroyRef提供者简化代码，不需要手动实现OnDestroy：

import { DestroyRef, inject } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { filter, take } from 'rxjs';

export class Foo implements OnInit {
    private destroyRef = inject(DestroyRef);

    constructor(public auth: AuthService) { }

    ngOnInit(): void {
        this.auth.fireAuthUser$.pipe(
            filter(fireAuthUser => !!fireAuthUser),
            take(1),
            takeUntilDestroyed(this.destroyRef)
        ).subscribe(() => {
            this.auth.doSomeStuff();
        });
    }
}

原有写法的说明 #

你当前的代码能正常运行，是因为只要用户登录后fireAuthUser$推送了有效值，takeWhile的判断条件返回false就会终止订阅，但始终覆盖不了用户未登录就离开组件的场景，用上面的takeUntil方案可以100%覆盖所有情况，没有内存泄漏风险。

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