Angular：函数返回Observable与类属性赋值的shareReplay行为差异解析

我有一段基于Angular服务的Observable管道代码，使用mergeMap、filter、map及shareReplay(1)运算符处理用户认证并从用户资料中获取入职状态，目的是高效复用该管道以监听入职状态变化。

但将逻辑封装为函数返回Observable，与赋值为类属性时出现行为差异：

• 从函数返回Observable时，每次订阅都会执行管道内的整个操作链
• 赋值为类属性时，shareReplay(1)运算符正常工作，整个操作链仅执行一次

我怀疑这与新实例的创建有关，想理解两种场景行为不同的原因，以及如何让shareReplay(1)在两种场景下保持一致的行为。

代码示例1（函数返回Observable） #

user$ = user(this.auth).pipe(shareReplay(1));

getStatus(): Observable<> {
 return this.angularService.user$.pipe(
            mergeMap(user => {
                console.log('Onboarding merge map');
                return this.angularService.getUserProfile(user?.uid || "").pipe(
                    filter(({ profile, user }) => {
                        console.log('Filter: ', profile['onboarding'])
                        return profile && profile['onboarding'];
                    }),
                    map(d => d.profile['onboarding'])
                )
            }),
            shareReplay(1)
        );
}

代码示例2（赋值为类属性） #

user$ = user(this.auth).pipe(shareReplay(1));

readonly onboardingStatus$: Observable<> = this.angularService.user$.pipe(
            mergeMap(user => {
                console.log('Onboarding merge map');
                return this.angularService.getUserProfile(user?.uid || "").pipe(
                    filter(({ profile, user }) => {
                        console.log('Filter: ', profile['onboarding'])
                        return profile && profile['onboarding'];
                    }),
                    map(d => d.profile['onboarding'])
                )
            }),
            shareReplay(1)
        );

补充：getUserProfile函数 #

getUserProfile(uid: string): Observable<{ profile: DocumentData, user: User }> {
        return documentSnapshot(doc(this.firestore, "users", uid)).pipe(
            tap((val) => console.log(`userProfile document snapshot executed`, val)),
            mergeMap((document) => (of({ profile: document.data(), user } as any))),
            shareReplay(1)
        );
    }

核心问题在于Observable实例的创建时机与复用性：

1. 类属性场景：
   onboardingStatus$是在类初始化时创建的单一Observable实例，shareReplay(1)绑定在这个实例上。所有订阅都指向同一个实例，因此操作链仅执行一次，所有订阅者共享缓存的结果。
2. 函数返回场景：
   每次调用getStatus()都会新建一个完整的Observable管道实例——包括里面的mergeMap、shareReplay(1)都是全新的独立实例。也就是说，每个订阅都会触发新管道的创建，自然会重复执行整个操作链。哪怕每个新实例内部都有shareReplay(1)，但它们的缓存是各自独立的，无法在订阅者之间共享。

另外，getUserProfile函数每次调用也会返回新的Observable（尽管内部有shareReplay(1)），但在函数场景下，每次getStatus()调用都会触发mergeMap里的getUserProfile调用；不过只要uid不变，getUserProfile内部的缓存能生效，但外层的mergeMap仍会因为管道重新创建而重复执行。

要让函数返回的Observable实现和类属性一样的共享效果，核心是让所有订阅共享同一个Observable实例，有两种常用实现方式：

方式1：提前缓存Observable实例 #

将管道实例预先创建为类的私有属性，函数仅返回这个缓存的实例：

user$ = user(this.auth).pipe(shareReplay(1));

// 私有属性缓存Observable实例
private readonly _onboardingStatus$: Observable<> = this.angularService.user$.pipe(
    mergeMap(user => {
        console.log('Onboarding merge map');
        return this.angularService.getUserProfile(user?.uid || "").pipe(
            filter(({ profile, user }) => {
                console.log('Filter: ', profile['onboarding'])
                return profile && profile['onboarding'];
            }),
            map(d => d.profile['onboarding'])
        )
    }),
    shareReplay(1)
);

getStatus(): Observable<> {
    // 函数直接返回缓存的实例
    return this._onboardingStatus$;
}

无论调用多少次getStatus()，返回的都是同一个Observable实例，shareReplay(1)的缓存能被所有订阅者共享。

方式2：惰性初始化+缓存 #

如果希望只有在需要时才创建Observable实例（避免提前初始化不必要的资源），可以用惰性加载的方式：

user$ = user(this.auth).pipe(shareReplay(1));
private _onboardingStatus$: Observable<> | undefined;

getStatus(): Observable<> {
    // 仅第一次调用时创建实例，后续复用
    if (!this._onboardingStatus$) {
        this._onboardingStatus$ = this.angularService.user$.pipe(
            mergeMap(user => {
                console.log('Onboarding merge map');
                return this.angularService.getUserProfile(user?.uid || "").pipe(
                    filter(({ profile, user }) => {
                        console.log('Filter: ', profile['onboarding'])
                        return profile && profile['onboarding'];
                    }),
                    map(d => d.profile['onboarding'])
                )
            }),
            shareReplay(1)
        );
    }
    return this._onboardingStatus$;
}

这种方式会在第一次调用getStatus()时创建Observable实例，之后的调用都复用该实例，同样能实现shareReplay(1)的共享缓存效果。

关于getUserProfile的额外优化 #

如果想进一步优化getUserProfile的复用，可以按uid缓存不同的Observable实例（比如用Map<string, Observable<...>>存储），但这属于额外的性能优化，与当前问题的核心（外层管道实例复用）无关。

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