Angular：組件之間的消息傳遞

Question

我有一個處理 WebSocket 的組件 A。 並且我也有多個用於演示的組件（例如 B）。 當 WebSocket 收到特定消息時，我需要在特定組件中執行操作（例如重新加載數據）。

我這樣做的方式是在 A 中有一個主題。這將傳遞給 B。當 A 中的 WebSocket 收到一條消息時，我調用“next”來觸發 B。

組件.ts

subj : Subject <string> = new Subject <string> ();

connectWebsocket ()
{
    let sjs = new SockJS ("http://localhost:8090/ep");
    this.sc = Stomp.over (sjs);
    this.sc.connect ({}, (frame) =>
    {
        this.sc.subscribe ("/broker/webclient", (event) =>
        {
            if (event.body == "RELOAD")
            {
                this.subj.next ("RELOAD");      // trigger B to reload
            }
        });
    }
}

B.component.ts

@Input () subj : Subject <string>;

ngOnInit ()
{
    this.subj.subscribe
    (
        (msg) =>
        {
            // reload data if msg == "RELOAD"
        }
    );
}

它運作良好。 但我不確定這樣做是否是常見的策略，或者是否有更好的方法（例如在 A 中重新加載並僅將數據傳遞給 B - 或使用其他機制）？

Answer 1

我認為您的方法在 Angular 中不是“慣用的”。

通常認為最佳實踐如下：

1. 創建一個公開 2 類 API 的服務

• 服務的客戶端可以用來發出命令的常規方法
• 需要訂閱它們的客戶端的可觀察流

2. 通過依賴注入將服務傳遞給需要使用它的組件

在你的情況下，服務應該有可能是這樣的：

• 一種開始與 websocket 服務器連接的方法（或者這個連接可能在服務初始化時建立）
• 當從 websocket 服務接收到適當的消息時，您next的私人主題
• 一個公共的 Observable，您可以在私有主體上執行asObservable()方法

B.component.ts將通過依賴注入接收服務，並訂閱服務公開的公共 Observable。

這個想法在這篇文章中有詳細描述。 即使文章展示了 React 中的示例，Service 和 Component 的概念也可以與 Angular 的概念一一對應。