Angular容器组件架构：容器是否应接收@Input？

好问题！很多开发者对容器/展示组件架构存在一个常见误解：认为容器组件绝对不能接收@Input。但实际上，这个架构的核心是职责分离，而非限制数据的来源。我们可以结合你的场景具体分析：

先明确容器/展示架构的核心原则 #

容器组件（智能组件）：专注于业务逻辑、状态管理、数据处理（比如你的滚动监听、目录激活状态计算），不直接负责UI渲染。
展示组件（哑组件）：仅接收数据并完成UI渲染，不包含任何业务逻辑或状态管理代码。

你的场景完全符合规范 #

你之前的容器是router-outlet级组件，自己负责数据获取，所以不需要@Input——这是合理的。但现在它被作为ng-content投影到父组件中，父组件已经持有所需的页面标题数组，此时用@Input传递数据比用服务更合理：

• 服务适合跨多个无关组件共享全局数据，而这里是直接的组件间投影通信，@Input更清晰、更符合组件化设计的“就近原则”，也更易维护和调试。
• 只要这个@Input是给容器组件用于逻辑处理（比如接收标题数组后，监听滚动事件计算当前激活的标题，再把处理后的带状态数据传给展示组件），容器的核心职责依然是封装逻辑，完全没有违反架构规范。

纠正一个关键误区 #

容器组件并非必须“自给自足”地获取所有数据，数据来源可以是多种形式：路由参数、@Input、服务、状态管理库（如NgRx）等。判断是否符合规范的核心标准是：容器是否专注于逻辑处理，而非直接渲染UI。

结论 #

让你的容器组件接收@Input不仅不违反容器/展示架构规范，反而在当前的投影场景下是更优的实现方案。只要保持容器专注于滚动监听、目录状态计算等逻辑，展示组件只负责渲染UI，就能很好地维持职责分离的架构优势。

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