在 Angular 中动态创建 EvenEmitter

Question

我正在尝试使用 Angular 中的 EventEmitter 实现观察者类型的模式。

例如，我有一个名为 component1Publisher

的发布者

component1Publisher: EventEmitter<any> = new EventEmitter();

正在发布如下事件

this.component1Publisher.emit(data);

订阅如下多个组件

component1Publisher.subscribe((data:any) => {
            //do something here;

          });

你可以看到发布者是静态的declared.In我的项目发布者和订阅者是完全动态的。所以我想根据我的独特组件 name.Something 创建这个 EventEmitter 实例和订阅者，如下所示

createEvent(uniqueName:string){
//new unique eventEmitter
}

我的问题 我有一个可重用的框架来创建一个仪表板，用户可以使用框架本身提供的小部件。所以我试图在小部件之间进行通信以使其具有交互性。例如，当您单击小部件时，应该通知所有其他 widgets.To 这样做，我打算告诉用户提供动态服务。在动态服务中有一些方法，如 onWidgetClick()，它将通过动态解析服务由框架触发。在该方法中，用户可以创建要发布的事件。它将用新数据通知所有小部件，框架将用新数据更新它（所有可重用小部件都有订阅者）。

你能帮我解决这个问题吗，或者建议有没有其他方法可以实现这种实现

Answer 1

根据您最终要实现的目标，这可能不是必需的。您可以利用 Angular 的更改检测来提供您需要的通知。

例如，您可以设置这样的服务：

import { Injectable } from '@angular/core';

@Injectable() 
export class DataService {
  serviceData: string; 
}

绑定到该数据的任何模板都会自动收到更改通知（无需事件）。

我在这里有一个博客 post：https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

还有一个笨蛋：https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview

Answer 2

我会在 component/directive 'this' 所指的任何内容中定义一个映射（我认为这是正确的术语？）。类似于：

componentPublishers: { [index:string] : EventEmitter<any> } = {};

该代码只是说，我正在创建一个包含 EventEmitter 的对象，所有事件均由字符串标识（您可以使用字符串或数字作为标识符，但几乎在所有情况下人们都使用字符串）。

然后你可以给它添加任何你喜欢的名字的EventEmitters，通过使用括号符号（在JS中用来给对象添加新的属性）。

createEvent(uniqueName:string){
  this.componentPublishers[uniqueName] = new EventEmitter<any>();

 // and maybe you'd want to return it?

  return this.componentPublishers[uniqueName];
}

创建后，您应该可以正常访问它而无需括号表示法。通过使用我上面显示的地图，typescript 将知道 componentPublishers 对象的任何属性将是一个事件发射器。

this.componentPublishers.myNewEventEmitter.emit('some value');

注意：如果您尝试使用方括号表示法向对象添加属性，如果您没有首先实例化它，您将会遇到错误。我只是将它实例化为一个空对象。

 ... =  {};

所以一定要这样做。

您也可以只创建一个事件发射器数组并将新的发射器推入其中，但这很快就会变得笨拙，因为您必须跟踪索引。通过使用映射，您可以像访问常规对象一样按名称访问它们，并且仍然可以进行 Typescript 的静态类型检查。

在 Angular 中动态创建 EvenEmitter

Create EvenEmitter dynamically in Angular

observer-pattern

eventemitter

angular