Angular|Angular 应用里几种 Component 的分类阐述 Angular应用里几种Component的分类

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 例子：

文章图片

【Angular|Angular 应用里几种 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 应用程序组合成小型、简洁和单一职责的表示组件集合来构建。