为何Angular的async管道无法订阅在类初始化器或构造函数中创建的Observable？

这个问题的关键其实是Angular组件生命周期中@Input属性的赋值时机，我来给你拆解清楚：

执行顺序的核心差异 #

Angular组件的生命周期里，不同阶段的执行时机决定了@Input属性的可访问性：

• 类初始化器/构造函数阶段：当Angular创建组件实例时，会先执行类的初始化代码（比如你声明id$、data$的部分）和构造函数。但此时Angular还未完成父组件传入的@Input属性赋值——组件1的set id(val)还没被触发，组件2的this.id还是undefined。
• ngOnInit阶段：这个钩子会在Angular完成所有@Input属性的赋值后才调用。所以组件2的ngOnInit里，this.id已经拿到了父组件传入的有效值，此时用of(id = ${this.id})创建的Observable会立即发出数据，async管道订阅后就能正常显示内容。

为什么组件1的async管道看起来“无法订阅”？ #

其实组件1的data$是可以被async管道订阅的，只是它初始没有发出任何数据：

• id$是一个普通Subject，在类初始化时没有发出过任何值，而data$是基于id$的switchMap流，所以只有当set id(val)被触发（Angular给@Input赋值时），id$.next(val)才会推动data$发出新值。
• 如果你测试时父组件是初始渲染就传入id，组件1的set id会在类初始化后触发，data$会发出值；但如果你的测试场景中没有触发set id，或者初始没有值，data$就不会有输出，看起来像是“无法订阅”。

优化组件1的写法（让初始值也能正常显示） #

你可以用BehaviorSubject代替普通Subject，它会保存最新值并在订阅时立即发出，这样async管道一开始就能拿到数据：

@Component({ template: '{{ data$ | async | json }}', selector: 'app-data' })
export class AppData {
 readonly id$ = new BehaviorSubject<number | undefined>(undefined);
 readonly data$ = this.id$.pipe(
  switchMap(id => id ? of(`id = ${id}`) : of('No id provided'))
 );
 @Input() set id(val: number) { this.id$.next(val) }
}

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