Angular 中的广播消息

引言

观察者 设计模式是 GoF 书中最重要的设计模式之一，本文展示了如何使用它来促进 Angular 中的广播消息。广播消息意味着发送者（发布者）向多个接收者（订阅者）发送消息。任何组件都可以通过发布者向订阅发布者服务的任何其他组件发送消息。

背景

在 Angular 中，在父组件和子组件之间发送消息很容易。这是任何 Angular 应用程序的标准过程。但是，让任何组件向组件层次结构中的任何其他组件发送消息可能很困难。本文中的代码包含说明该原理所需的最低限度，并且我已尝试使代码简洁明了。代码来源的应用程序基于 Angular2 版本 8。

发布者服务

发布者服务是一个使用 rxjs npm 包的 单例 类，如下所示

import * as Rx from 'rxjs';
import {InformationToShow} from '../models';

export class PublisherService{

    private instance: Rx.Subject<InformationToShow>;

    createInstance(): Rx.Subject<InformationToShow> {
        const instance = new Rx.Subject<InformationToShow>();

        return instance;
    }

    public getInstance(): Rx.Subject<InformationToShow> {

        if (!this.instance) {
            this.instance = this.createInstance();
        }

        return this.instance;
    }
}

模型类 InformationToShow 可能如下所示

export class InformationToShow{
    Information: string;
    SubscriberId: number;
...

}

可以以任何方式扩展和更改此类。SubscriberId 用于即使所有订阅者都收到相同的消息，也能向特定组件发送消息。

订阅者

订阅者是监听并对已更改的信息采取行动的组件，方法是订阅发布者服务。假设应用程序中存在此代码的许多实例。每个实例都有自己的 SubscriberId，以便即使所有实例都收到相同的消息，也能向特定实例发送消息。发布者服务通过 Angular 构造函数依赖注入注入，就像应用程序中的所有其他服务一样

constructor(private publisherService: PublisherService) { }

在 ngOnInit 中，服务订阅如下

publisherSubscription: any;

ngOnInit() {
   this.publisherSubscription = this.publisherService
     .getInstance().subscribe((data: InformationToShow) => {
     
     if (data.SubscriberId === this.information.SubscriberId)
     {
         this.information = data;        
     }
  });
}

在这里，您可以看到如何使用 SubscriberId 确保组件仅处理属于特定实例的信息。

从程序中的任何位置发送消息

要发送消息，使用方法 getInstance().next(informationToShow)，如下所示

onInformationChange(informationToShow: InformationToShow) {
      this.publisherService.getInstance().next(informationToShow);
   }
}

想象一下，此代码可以在应用程序的许多位置使用，从而促进多对多通信。

最后，在 ngOnDestroy() 中取消订阅

    ngOnDestroy() {
        this.publisherSubscription.unsubscribe();
    }

历史

• 2019 年 11 月 16 日：第一个版本
• 2019 年 11 月 19 日：添加了 unsubscribe