类级别初始化Observable时ngOnInit内RxJS pipe为何不执行

pipe()不会修改原有Observable实例，这是问题的本质。
RxJS中所有操作符基于pipe()挂载时，都不会改变调用pipe()的原始流，只会返回一个全新的、携带了所有操作符逻辑的Observable实例。你在ngOnInit中调用this.items$.pipe(...)后，没有将返回的新流重新赋值给items$属性，这个带tap逻辑的新流没有任何订阅者，逻辑自然不会执行。

执行流程拆解 #

• 类属性声明层级的初始化早于ngOnInit执行：组件实例创建时，items$就已经被赋值为this.dataService.getItems()返回的原始流实例。
• ngOnInit执行阶段，你调用this.items$.pipe(tap(...))生成了新流，但这个新流既没有被赋值给任何变量，也没有被订阅，属于完全没有被使用的孤立实例。
• 模板中async管道从始至终订阅的都是items$属性指向的原始流，根本没有接触到你挂载了tap逻辑的新流，所以控制台日志永远不会触发。

为什么延迟模板渲染不生效 #

你尝试延后async管道的订阅时机没有效果，原因非常直接：问题和订阅时机无关。无论async管道多晚发起订阅，它订阅的始终是items$上存储的、没有挂载任何额外操作符的原始流，自然不会执行你写在ngOnInit里的tap逻辑。

符合预期的写法 #

如果要在属性声明层级完成Observable初始化，直接在初始化时挂载pipe逻辑即可，此时items$指向的就是携带完整操作符的流：

export class MyComponent implements OnInit {
  constructor(private dataService: DataService) { }
  // 初始化时直接挂载pipe逻辑
  items$: Observable<Item[]> = this.dataService.getItems().pipe(
    tap(data => {
      console.log('items', data);
    })
  );
  ngOnInit(): void {
    // 不需要在这里额外处理流逻辑
  }
}

如果确实需要在ngOnInit中追加流逻辑，必须将pipe()返回的新流重新赋值给items$，且保证赋值动作发生在async管道订阅之前：

export class MyComponent implements OnInit {
  items$!: Observable<Item[]>;
  constructor(private dataService: DataService) { }
  ngOnInit(): void {
    const source$ = this.dataService.getItems();
    this.items$ = source$.pipe(
      tap(data => {
        console.log('items', data);
      })
    )
  }
}

注意：RxJS的流设计是不可变的，任何针对流的操作符拼接、逻辑追加，都不会修改原有流实例，只会生成新的流，这是RxJS最核心的设计特性之一。

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