Question

我最近发现了Angular Elements，并认为它非常适合我的门户应用程序，因为它涉及许多具有不同要求的团队。

团队将负责向其他团队提供自己的小部件。我需要在小部件（平铺）之间建立一条完全解耦的类型安全消息传递总线，以允许它们彼此通信。

我从GitHub上一个非常好的演示应用程序开始，并添加了几个类。 Forked project

外部通信是通过DashboardTileComponent和LazyDashboardTileComponent使用的继承的BaseWidgetComponent类的@Input messageIn和@Output messageOut实现的。

export class BaseWidgetComponent {
  private readonly _message: Subject<WidgetMessage>;

  constructor() {
    this._message = new Subject<WidgetMessage>();
    this.messageOut = new EventEmitter<WidgetMessage>();
  }

  @Input()
  set messageIn(message: WidgetMessage) {
    this._message.next(message);
  }

  @Output() messageOut: EventEmitter<WidgetMessage>;

  protected on(messageType: string): Observable<WidgetMessage> {
    return this._message.pipe(filter(x => x.type === messageType));
  }

  protected publish(messageType: string, payload: string): void {
    this.messageOut.emit({sender: this, type: messageType, payload: payload});
  }
}

DashboardComponent（容器组件）将负责实例化运行时窗口小部件，并使用WidgetMessagingService注册它们以启用交叉通信。注册是在messageOut上添加事件侦听器以发布新消息，并在新消息到来时更新messageIn。

public register(widget: NgElement & WithProperties<BaseWidgetComponent>): void {
    this._message.subscribe(x => {
      widget.messageIn = x;
    });

    widget.addEventListener('messageOut', (x: CustomEvent<WidgetMessage>) => {
      this._message.next(x.detail);
    });
}

此技术的问题在于，没有办法知道小部件是否已销毁，以便清除所有引用以避免泄漏。

我试图添加一个@Output（'destroyed'）并在OnDestroy生命周期挂钩上发出事件，但没有成功。

我找到了一些高级代码示例来拦截包括'disconnectedCallback'在内的所有事件，并执行除我以外的工作，但我希望其他开发人员可以将代码保持非常简单。 Angular Elements bridge

在这里您可以找到My working implementation。您只需要添加一个默认值和一个懒惰的小部件，然后单击它们的发布按钮以查看全部流程。

基本上，我需要找到一种方法来了解何时放置了小部件并调用unregister方法清除所有内容。

我该怎么做？

有没有更好的方法来实现这种交流？

动态Angular Elements之间的消息总线

0 个答案: