本文討論如果兩個(gè) Angular Component 彼此不知道對(duì)方的存在，并且也沒有共享的父子 Component 時(shí)，如何進(jìn)行通信。

在包括 Angular 在內(nèi)的許多前端框架中，當(dāng)我們將應(yīng)用程序或頁面劃分為許多小的 UI 組件并將事件綁定到一個(gè)嵌套了很多層的組件時(shí)，總是存在通信問題。

在 Angular 中，我們使用 @Output() 和 @Input()。 這在正常情況下能夠很好的工作，但是當(dāng)我們想要綁定傳入的數(shù)據(jù)并將傳出的事件綁定到一個(gè) container 組件時(shí)，管理起來可能是一場(chǎng)噩夢(mèng)。

我們需要在組件的很多層級(jí)上添加大量的 @Input() 和@Output()。

本文介紹兩種解決方案：

• Event Bus by using Subject.
• Observable Service with Behavior Subject.

討論的場(chǎng)景是，有一個(gè) Angular Component 具有很多 article list，點(diǎn)擊某個(gè)項(xiàng)目，能查看 article 明細(xì)。

Event Bus Solution

我們創(chuàng)建一個(gè)全局可用的 event bus service.

然后，我們可以向 bus 發(fā)出事件，如果有任何偵聽器注冊(cè)到該事件名稱，那么它將執(zhí)行回調(diào)函數(shù)。

在本文中，我將使用 RsJS subject 創(chuàng)建 event bus service.

從文章列表中，每次用戶點(diǎn)擊該項(xiàng)目時(shí)，它會(huì)發(fā)出一個(gè)事件并將文章數(shù)據(jù)傳遞到 event bus.

上圖代碼展示了如何把事件 SelectArticleDetail 連同選中的 article 數(shù)據(jù)，一起通過 event bus 發(fā)送出去。

接下來，我們?cè)?Article Detail Component 里使用 event bus service 的 on 方法，監(jiān)聽后者拋出的 SelectArticleDetail 事件。

這里我們定義的回調(diào)函數(shù)，將 event bus service 拋出的 Article 數(shù)據(jù)，保存到 Component 屬性 detail 里。

Observable Service Solution

這個(gè)想法很簡(jiǎn)單，就是創(chuàng)建一個(gè)庫存來傳遞里面的值。 所以每次庫存變化時(shí)，觀察者都會(huì)知道它并執(zhí)行回調(diào)。
我們使用名為inventorySubject$ 的默認(rèn)文章值和addToInventory() 方法創(chuàng)建一個(gè)BehaviorSubject，以將文章添加到庫存中。

在 article list 里，每次用戶點(diǎn)擊一個(gè)條目時(shí)，調(diào)用 Observable service addToInventory 方法，將當(dāng)前 article 傳入 this.inventorySubject$.next 方法。

然后在 article detail Component 里，我們訂閱 this.inventorySubject$ 的變化：

什么時(shí)候使用這兩種方案？

我們使用 Observable Service 訂閱簡(jiǎn)單案例的數(shù)據(jù)，我們使用 Event Bus 將不同的事件名稱分派給不同的偵聽器。

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的使用 Rxjs 解决 Angular Component 之间的通信问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。