NgRx中父子组件间的数据传递方案选型

这个问题没有绝对标准答案，核心要看你的app-component2的定位和业务需求：

优先用@Input传递的场景 #

如果app-component2是纯展示型组件（只负责渲染传入数据，不需要处理业务逻辑、触发状态变更），用@Input更优：

• 组件复用性更强：不依赖NgRx Store，在非NgRx模块里也能直接复用；
• 数据流更清晰：数据从父组件明确传递，调试时能直接追踪来源；
• 降低全局状态耦合：避免组件绑定到特定NgRx状态结构，后续状态调整时影响范围更小。

对应的代码调整：
父组件模板：

<div *ngIf=" content$ | async as content">
  <h1>{{content.prop1}}</h1>
  <app-component2 [content]="content"></app-component2>
</div>

Component2代码：

@Input() content: ContentType; // 定义对应的数据类型

优先直接注入Store的场景 #

如果app-component2是业务型组件（需要自己触发action、监听关联状态，或数据需复杂selector处理），直接注入Store并使用async pipe更合适：

• 避免props drilling：后续组件层级变深时，不用逐层传值；
• 发挥NgRx优势：组件可直接订阅所需状态，状态变更时自动响应，无需依赖父组件传递；
• 职责更清晰：业务逻辑和状态依赖由组件自主管理，父组件无需关心子组件的状态需求。

对应的Component2代码示例：

content$ = this.store.select(selectContent); // 用对应selector获取状态

constructor(private store: Store) {}

Component2模板：

<div *ngIf="content$ | async as content">
  <!-- 渲染逻辑 -->
</div>

总结 #

• 纯UI组件选@Input，保证解耦与复用；
• 业务绑定型组件选直接用Store，发挥NgRx状态管理优势，减少组件间耦合。

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