Angular如何将包含Observable的数组作为@Input传递给子组件

推荐直接用RxJS组合所有Observable + 原生async管道的方案，改动量极小，完全满足不修改子组件、不修改Store逻辑的要求：

步骤1：父组件TS调整 #

你只需要把原来散在数组里的Observable做一次组合，代码如下：

import { combineLatest, map } from 'rxjs';

// 1. 先定义常量配置，把固定值和对应的Store Observable对应起来
private readonly summaryConfig = [
  { title$: this.store.select(Title), text: "someConstantValue" },
  // 其他数组项按原有逻辑补充
];

// 2. 定义组合流，自动解析所有Observable
summaryTitles$ = combineLatest(
  this.summaryConfig.map(item => item.title$)
).pipe(
  map((titleList) => 
    // 把解析后的title和对应常量拼接成目标结构
    titleList.map((title, index) => ({
      title,
      text: this.summaryConfig[index].text
    }))
  )
);

步骤2：模板绑定调整 #

和你原来单值用async管道的写法完全一致：

<child [summary]="summaryTitles$ | async"></child>

方案优势 #

• 完全复用Angular原生async管道的能力，自动处理订阅、销毁，不会出现内存泄漏
• 不需要修改子组件任何代码，传入的summary就是已经解析完成的普通对象数组，和你要求的目标结构完全一致
• 不需要修改任何Store相关逻辑，所有取数逻辑还是复用原来的store.select写法
• 如果需要给某个字段加默认值，只需要给对应的title$加startWith(默认值)操作符即可，不影响其他逻辑

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