Angular中async/ngrxLet管道无法订阅Observable问题

你的问题核心在于普通Subject的特性和Angular管道的订阅时机差异：

1. 普通Subject的无缓存特性
   普通Subject不会保存任何已发出的值，只有在订阅之后通过next()发出的值，才能被订阅者接收到。如果next()在订阅之前执行，订阅者永远拿不到这个值。

2. 订阅时机的差异

• 手动订阅：如果你在ngOnInit中先调用list$.subscribe()，再执行reformatList.next()，这时候订阅已经建立，next()发出的值会被正常捕获，所以能看到日志输出。
• async/ngrxLet管道：这两个管道的订阅逻辑是在Angular的变更检测周期中触发的（通常在ngOnInit之后，比如第一次组件视图渲染阶段）。此时你在ngOnInit里的reformatList.next()已经执行完毕，普通Subject没有缓存这个值，所以管道订阅后没有新的事件触发，list$自然不会输出任何内容。

3. BehaviorSubject生效的原因
   BehaviorSubject会缓存最新的一次值，当管道订阅list$时，它会立即把缓存的最新回调函数值发送给订阅者。结合你的user$是ReplaySubject(1)（同样缓存了最新的user值），withLatestFrom就能组合出有效结果，所以列表能正常渲染。

针对你的场景，有几种可行的解决方式：

方案1：使用BehaviorSubject（你已经验证过的方式） #

初始化时传入默认回调，确保流始终有缓存值：

private reformatList = new BehaviorSubject<Formatter>((res) => res);

方案2：给reformatList添加startWith操作符 #

通过startWith在流的开头注入一个默认回调，让list$在订阅时就能拿到初始值，无需依赖Subject的缓存特性：

list$: Observable<string[]> = this.reformatList.pipe(
  startWith((res) => res), // 添加初始值
  withLatestFrom(this.user$),
  map(([callback, user]: [Formatter, User]) =>
    callback(
      Object.entries(user.features).reduce(
        (acc: string[], [key, value]: [string, any]) => {
          const excludedKeys = ['key1', 'key2'];
          if (excludedKeys.includes(key)) return acc;
          value > 0 && acc.push(key);
          return acc;
        },
        [],
      ),
    ),
  ),
  tap((res) => console.log(res)), // 修正：传入res才能打印流结果
);

方案3：调整next的执行时机 #

把reformatList.next()的调用推迟到管道订阅之后，比如放到ngAfterViewInit钩子中（此时组件视图已初始化，管道大概率完成订阅）：

ngAfterViewInit(): void {
  this.reformatList.next((res) => res);
}

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