2

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

团队将负责向其他团队提供他们自己的小部件。我需要在小部件（瓦片）之间建立一个完全解耦的类型安全消息总线，允许它们相互通信。

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

外部世界的通信是通过继承 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”在内的所有事件并做我除了但我希望让其他开发人员的代码非常简单。角元素桥

在这里您可以找到我的工作实施。您只需要添加一个默认和一个惰性小部件，然后单击它们的发布按钮即可查看完整流程。

基本上我需要找到一种方法来知道小部件何时被释放并调用 unregister 方法来清除所有内容。

我怎样才能做到这一点？

有没有更好的方法来实现这种沟通？

4

0 回答 0