Angular 17子组件Input Subject为空及条件渲染问题求助

问题原因 #

你使用的Subject有个核心特性：它只会向订阅发生之后的新订阅者发送事件。具体到你的场景：

1. 父模板里的@if(items$ | async)先订阅了items$，当API返回数据时，这个订阅接收到数据，触发@if条件成立，开始渲染子组件。
2. 子组件初始化完成后（无论是ngOnInit里的手动订阅还是模板中async管道的自动订阅），才订阅items$，但此时API返回的那次事件已经被Subject发送完毕，新订阅无法获取历史事件，因此子组件显示无数据。
3. 把子组件移出@if条件时，子组件在页面加载初期就完成了订阅，和父组件的订阅时机几乎同步，能接收到后续API返回的事件，所以能正常显示数据。

解决方法 #

方法1：替换为BehaviorSubject

BehaviorSubject会保存最新的一次事件值，新订阅者订阅时会立即收到这个最新值。修改父组件代码：

// 父组件.ts
import { BehaviorSubject } from 'rxjs';

// 初始化时传入空数组作为默认值
items$ = new BehaviorSubject<Array<Item>>([]);

ngOnInit(){
    this.itemService.getItems().subscribe({
        next: (items) => this.items$.next(items),
        error: (err) => console.error(err)
    });
}

这样无论子组件何时订阅items$，都能拿到最新的数组数据，放在@if条件中也能正常渲染。

方法2：传递具体数据而非Observable

如果不需要传递Observable给子组件，可以在父组件中通过async管道缓存数据，直接传递数组给子组件：

<!-- 父组件模板 -->
@if(items$ | async; as items){
  "There are items!"
  <app-child [items]="items"></app-child>
}@else{
  "There aren't any items"
}

修改子组件的输入定义：

// 子组件.ts
import { Input } from '@angular/core';

export class ChildComponent {
  @Input() items: Array<Item> = [];
}

子组件模板直接使用items：

<!-- 子组件模板 -->
@if(items.length > 0){
  "There are items in the child component!"
}@else{
  "There aren't any items in the child component"
}

这种方式更直观，也规避了Observable订阅时机的问题。

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