Angular 元件架構可以透過充分利用 Angular（@Input() 和 @Output()）和 ngrx/store（dispatch() 和 select() 方法）的內在特性來使 Angular 應用程式受益。
![](https://img-blog.csdnimg.cn/img_convert/33bbcfd4ebc38d1716361be280f2c847.png)

上圖的體系架構裡，我們觀察到了兩種型別的 Component：

- Smart(有時也稱為 Container)
 - Dummy(有時也稱為 Presentational)

Container 元件是唯一知道 Store 存在的元件。 ngrx/store 模組的內在特性促進了該元件和 Store 之間的通訊。

- 該元件透過 select() 方法訂閱 Store 以接收請求的資料流
- 該元件透過 dispatch() 方法向 Store 分派一個動作，以表明需要更新狀態。

下面是 SAP 電商雲 Spartacus UI 裡一個典型的 container Component 例子：

![](https://img-blog.csdnimg.cn/img_convert/9d20a31d3e3eb2997f913385ad25f00a.png)

儘管容器元件知道 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 應用程式組合成小型、簡潔和單一職責的表示元件集合來構建。

Angular 應用裡幾種 Component 的分類闡述

相關文章