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

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

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

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

本文介紹兩種解決方案：

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

討論的場景是，有一個 Angular Component 具有很多 article list，點擊某個項目，能查看 article 明細(xì)。

Event Bus Solution

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

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

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

從文章列表中，每次用戶點擊該項目時，它會發(fā)出一個事件并將文章數(shù)據(jù)傳遞到 event bus.

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

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

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

Observable Service Solution

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

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

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

什么時候使用這兩種方案？

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

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

總結(jié)

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

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