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 的概念一一对应。