RxJs Subject未按预期工作：Angular组件间数据传递异常排查

问题根源 #

核心问题在于普通Subject的特性：它只会将订阅之后发出的事件推送给订阅者。当前代码的执行顺序是：

1. 调用selectedProductSubject.next(product)发送数据
2. 执行路由导航跳转到SelectedProductComponent

等SelectedProductComponent完成初始化并订阅selectedProductSubject$时，之前的next事件已经触发完毕，自然接收不到数据。

修复方案：改用BehaviorSubject #

BehaviorSubject是Subject的子类，它会始终保存最新的一次发送值，新订阅者在订阅时会立即收到这个最新值，完美适配这种跨组件路由传递数据的场景。

修改ProductGalleryService代码：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { ProductModel } from './your-product-model-path';

@Injectable({
  providedIn: 'root' // 确保服务是单例
})
export class ProductGalleryService {
    // 初始化时传入默认值，比如null或者空对象
    private selectedProductSubject = new BehaviorSubject<ProductModel | null>(null);
    selectedProductSubject$ = this.selectedProductSubject.asObservable();

    public setSelectedProduct = (product: ProductModel) => {
        this.selectedProductSubject.next(product);
    }
}

可选方案：调整事件发送与路由的顺序

如果不想改用BehaviorSubject，也可以尝试先执行路由导航，再发送事件（依赖Angular路由导航的异步特性，可靠性不如BehaviorSubject）：

public setSelectedProduct = (product: ProductModel) => {
    this.router.navigateByUrl('/selected-product').then(() => {
        this.productGalleryService.setSelectedProduct(product);
    });
}

额外注意事项 #

• 确保ProductGalleryService是单例：通过providedIn: 'root'或者在根模块的providers数组中声明，避免组件注入不同的服务实例导致数据无法共享。
• 在SelectedProductComponent中记得取消订阅，防止内存泄漏（可以用async管道，或者在组件销毁时调用unsubscribe()）。

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