本文討論如果兩個 Angular Component 彼此不知道對方的存在，並且也沒有共享的父子 Component 時，如何進行通訊。

在包括 Angular 在內的許多前端框架中，當我們將應用程式或頁面劃分為許多小的 UI 元件並將事件繫結到一個巢狀了很多層的元件時，總是存在通訊問題。

在 Angular 中，我們使用 @Output() 和 @Input()。 這在正常情況下能夠很好的工作，但是當我們想要繫結傳入的資料並將傳出的事件繫結到一個 container 元件時，管理起來可能是一場噩夢。

我們需要在元件的很多層級上新增大量的 @Input() 和@Output()。

本文介紹兩種解決方案：

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

討論的場景是，有一個 Angular Component 具有很多 article list，點選某個專案，能檢視 article 明細。

# Event Bus Solution

我們建立一個全域性可用的 event bus service.

然後，我們可以向 bus 發出事件，如果有任何偵聽器註冊到該事件名稱，那麼它將執行回撥函式。

在本文中，我將使用 RsJS subject 建立 event bus service.

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

從文章列表中，每次使用者點選該專案時，它會發出一個事件並將文章資料傳遞到 event bus.

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

上圖程式碼展示瞭如何把事件 SelectArticleDetail 連同選中的 article 資料，一起透過 event bus 傳送出去。

接下來，我們在 Article Detail Component 裡使用 event bus service 的 on 方法，監聽後者丟擲的 SelectArticleDetail 事件。

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

這裡我們定義的回撥函式，將 event bus service 丟擲的 Article 資料，儲存到 Component 屬性 detail 裡。

# Observable Service Solution

這個想法很簡單，就是建立一個庫存來傳遞裡面的值。 所以每次庫存變化時，觀察者都會知道它並執行回撥。
我們使用名為inventorySubject$ 的預設文章值和addToInventory() 方法建立一個BehaviorSubject，以將文章新增到庫存中。

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

在 article list 裡，每次使用者點選一個條目時，呼叫 Observable service addToInventory 方法，將當前 article 傳入 this.inventorySubject$.next 方法。

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

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

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

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

我們使用 Observable Service 訂閱簡單案例的資料，我們使用 Event Bus 將不同的事件名稱分派給不同的偵聽器。

使用 Rxjs 解決 Angular Component 之間的通訊問題

相關文章