标签：容器 阐述 Component 应用程序 presentational 组件 Angular Store

Angular 组件架构可以通过充分利用 Angular（@Input() 和 @Output()）和 ngrx/store（dispatch() 和 select() 方法）的内在特性来使 Angular 应用程序受益。

上图的体系架构里，我们观察到了两种类型的 Component：

• Smart(有时也称为 Container)
• Dummy(有时也称为 Presentational)

Container 组件是唯一知道 Store 存在的组件。 ngrx/store 模块的内在特性促进了该组件和 Store 之间的通信。

• 该组件通过 select() 方法订阅 Store 以接收请求的数据流
• 该组件通过 dispatch() 方法向 Store 分派一个动作，以表明需要更新状态。

下面是 SAP 电商云 Spartacus UI 里一个典型的 container Component 例子：

尽管容器组件知道 Store 并直接与 Store 通信，但展示组件并不知道 Store。 它只是使用 Angular 的内在特性与容器组件进行通信。 容器组件在与 Store 通信时充当两者之间的中间人。 容器组件和展示组件之间的任何交互都会以这种方式过滤到 Store。

这就是展示组件和容器组件之间的通信方式：

• presentational 组件定义了@Input() 参数，以通过容器组件对 Store 的订阅接收来自状态的任何数据切片。 容器组件负责提供展示组件所需的适当数据。 请记住，那些 @Input() 参数是不可变对象！

• presentational 组件使用 @Output() 事件发射器来请求应用程序状态的任何更新。 容器组件处理 presentational 组件的事件，而 presentational 组件又直接向 Store 分派一个动作。

从以上论述可以清楚地看到每种组件的责任区分。 尽管展示组件仅使用 Angular 固有特性来呈现任何 HTML，但容器组件完全依赖于 ngrx/store 模块固有特性。

通过使用这种模式，关注点分离(seperation of concern)的设计思想得以体现。 应用程序中只有一层组件知道 Store，其余的即表示组件的构建块，完全感知不到 Store 层的存在。这种设计模式促进了将 Angular 应用程序组合成小型、简洁和单一职责的表示组件集合来构建。

标签：容器,阐述,Component,应用程序,presentational,组件,Angular,Store
来源： https://www.cnblogs.com/sap-jerry/p/16513166.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。