本文來自于華為云云嶺團隊屈金雄同學(xué)的分享，通過對比幾種Angular組件間的通信方式，給大家介紹了一種新的Angular組件間通信的解決方案。其中首創(chuàng)了公共的dataService，用于任意組件間通信。 dataService通過angular service特性和注冊表的使用，可以實現(xiàn)消息的一收一發(fā)，無需再寫單獨的service邏輯。

背景

一般來講，Angular 已有的組件間通信方式有哪些？

序號通信方式描述1輸入屬性（@Input）通過屬性綁定，將數(shù)據(jù)從父組件傳遞給子組件。2輸出屬性（@Output）通過事件綁定，子組件可以發(fā)送事件給父組件，并傳遞數(shù)據(jù)。3父子組件直接訪問在某些情況下，父組件可以通過 ViewChild 或 ContentChild 裝飾器直接訪問子組件或模板中的元素。4服務(wù)（Service）創(chuàng)建共享的服務(wù)，組件可以注入該服務(wù)來存儲和獲取數(shù)據(jù)。5RxJS Subject 和 Observable使用 RxJS 中的 Subject 和 Observable 來實現(xiàn)組件之間的消息傳遞。6Angular 路由參數(shù)通過路由參數(shù)在不同組件之間傳遞數(shù)據(jù)。7NgRx使用 NgRx 狀態(tài)管理庫來實現(xiàn)更復(fù)雜的組件間通信和數(shù)據(jù)共享。

但以上方法各有局限性，要么代碼繁多，要么學(xué)習(xí)成本高，尤其是跨越多個組件的通信，例如下圖中從組件D到組件G，用前兩種方式就太繁瑣了，方式 4 和 5 可能是常用解決方案，但是仍然有些繁瑣——需要為每一組消息傳遞寫專有的 service 代碼。

本文介紹的通信方式是在方式 4 和 5 的基礎(chǔ)上，進行了做了特殊的抽象處理，實現(xiàn)了一個公共的 dataService，最終實現(xiàn)了消息一收一發(fā)，無需再寫中間環(huán)節(jié)的代碼。

常規(guī)方式實現(xiàn)組件間消息通信

為了做對比，這里先介紹一下前文所示的方式4+5方案，這個方案通過 service 和 rxjs 的 subject 結(jié)合使用，實現(xiàn)任意組件間通信。

首先，我們創(chuàng)建一個名為MessageService的服務(wù)，用于在組件之間傳遞消息：

接下來，我們有兩個組件，SenderComponent和ReceiverComponent。SenderComponent用于發(fā)送消息，而ReceiverComponent用于接收消息。

在這個示例中，我們通過MessageService來實現(xiàn)了SenderComponent向ReceiverComponent發(fā)送消息的功能。MessageService中使用了 RxJS 的Subject來創(chuàng)建一個可觀察的消息流，然后在SenderComponent中調(diào)用sendMessage方法來發(fā)送消息，而在ReceiverComponent中使用subscribe來訂閱消息流并接收消息。

請注意，為了使MessageService成為全局可用的單例服務(wù)，我們在@Injectable裝飾器中設(shè)置了providedIn: 'root'。這樣一來，MessageService將成為整個應(yīng)用程序中所有組件共享的單一實例。

為了使示例正常工作，別忘了將SenderComponent和ReceiverComponent添加到所屬的模塊中，并在模塊的模板中放置對應(yīng)的組件選擇器。

這樣，SenderComponent發(fā)送的消息將通過MessageService傳遞給ReceiverComponent，并顯示在ReceiverComponent中。這就完成了通過 Service 和 RxJS 的 Subject 實現(xiàn)組件間消息通信的示例。

新的解決方案

理解本方案，默認(rèn)需要熟悉 Angular 的 service 存儲傳遞數(shù)據(jù)原理 和 rxjs 的多播用法。

本方案原理是，通過 service 單例的特性（service 在模塊內(nèi)組件間是共享的）和 Subject 的多播特性，實現(xiàn)一個公共的 service，通過公共的 service 實現(xiàn)數(shù)據(jù)傳遞。相對的，如同前文中的message.service.ts文件所示，開發(fā)者需要為每一組通信單獨創(chuàng)建 service 文件，單獨寫響應(yīng)的邏輯。

理解本方案的三個關(guān)鍵點：

1. 單例?通過在@Injectable裝飾器中設(shè)置providedIn: 'root'，service 成為整個應(yīng)用程序中所有組件共享的單一實例。因為是共享的，所以能作為通信中消息的載體。這是本方案的根本前提。

2. rxjs 的多播?基礎(chǔ)原理是觀察者模式（即發(fā)布訂閱模式）

3. 注冊表?為了復(fù)用 service，簡化代碼，本方案引入了一個注冊表，用來存儲對應(yīng)每個消息事件的 Subject 對象。Subject 對象在創(chuàng)建監(jiān)聽時（需要接收消息的地方）創(chuàng)建。

service 代碼如下：

使用時只需引入上面的公共 dataService，然后以如下示例的方式直接調(diào)用 api 就行。

創(chuàng)建監(jiān)聽的示例：

發(fā)送消息的示例：

給出一個較完整的使用示例

以下是一個使用上文提供的DataService實現(xiàn)組件間消息通信的示例：

假設(shè)我們有兩個組件：SenderComponent和ReceiverComponent，它們需要通過DataService來傳遞消息。

在這個示例中，我們通過DataService實現(xiàn)了SenderComponent向ReceiverComponent發(fā)送消息的功能。DataService的sendMessage方法用于發(fā)送消息，而getListener方法用于訂閱消息，并在接收到消息時更新ReceiverComponent中的receivedMessage屬性。cancelSubscription方法用于取消訂閱，并在不再有監(jiān)聽者時從注冊表中移除監(jiān)聽器。

請確保將SenderComponent和ReceiverComponent添加到所屬的模塊中，并在模塊的模板中放置對應(yīng)的組件選擇器。

通過使用DataService，SenderComponent發(fā)送的消息將傳遞給ReceiverComponent，并顯示在ReceiverComponent中。這樣，我們成功地實現(xiàn)了組件間消息通信。

實踐拓展

后續(xù)可以做成插件，以裝飾器的形式調(diào)用。

以上就是 屈金雄 同學(xué)的分享，如果你也有更多前端技術(shù)想與我們交流，歡迎投稿。除此之外，也歡迎你參與到 OpenTiny 開源中來??，一起共建項目，一起研討前端技術(shù)。

關(guān)于 OpenTiny

OpenTiny 是一套企業(yè)級組件庫解決方案，適配 PC 端 / 移動端等多端，涵蓋 Vue2 / Vue3 / Angular 多技術(shù)棧，擁有主題配置系統(tǒng) / 中后臺模板 / CLI 命令行等效率提升工具，可幫助開發(fā)者高效開發(fā) Web 應(yīng)用。

核心亮點：

1. 跨端跨框架：使用 Renderless 無渲染組件設(shè)計架構(gòu)，實現(xiàn)了一套代碼同時支持 Vue2 / Vue3，PC / Mobile 端，并支持函數(shù)級別的邏輯定制和全模板替換，靈活性好、二次開發(fā)能力強。

2. 組件豐富：PC 端有80+組件，移動端有30+組件，包含高頻組件 Table、Tree、Select 等，內(nèi)置虛擬滾動，保證大數(shù)據(jù)場景下的流暢體驗，除了業(yè)界常見組件之外，我們還提供了一些獨有的特色組件，如：Split 面板分割器、IpAddress IP地址輸入框、Calendar 日歷、Crop 圖片裁切等

3. 配置式組件：組件支持模板式和配置式兩種使用方式，適合低代碼平臺，目前團隊已經(jīng)將 OpenTiny 集成到內(nèi)部的低代碼平臺，針對低碼平臺做了大量優(yōu)化

4. 周邊生態(tài)齊全：提供了基于 Angular + TypeScript 的 TinyNG 組件庫，提供包含 10+ 實用功能、20+ 典型頁面的 TinyPro 中后臺模板，提供覆蓋前端開發(fā)全流程的 TinyCLI 工程化工具，提供強大的在線主題配置平臺 TinyTheme

聯(lián)系我們：

• 官方公眾號：OpenTiny

• OpenTiny 官網(wǎng)：https://opentiny.design/

• OpenTiny 代碼倉庫：https://github.com/opentiny/

• Vue 組件庫：https://github.com/opentiny/tiny-vue?（歡迎 Star）

• Angluar組件庫：https://github.com/opentiny/ng?（歡迎 Star）

• CLI工具：https://github.com/opentiny/tiny-cli?（歡迎 Star）

更多視頻內(nèi)容也可以關(guān)注OpenTiny社區(qū)，B站/抖音/小紅書/視頻號。