Angular WebComponent 实例被创建多次

Question

我使用 angularElements createElement 创建了一个 Web 组件。我在不同角度的应用程序中使用这个网络组件。

每当用户移动到具有 Web 组件的视图时，就会创建 Web 组件的实例。但是当用户多次进出视图时。正在创建 WebComponent 的多个实例。并且该元素在 detachedNode 中可用。

这会产生意外行为，例如 api 被触发多次，次数等于分离元素的数量。

我们有什么方法可以删除/终止 Web 组件的实例或取消注册自定义元素。

任何帮助将不胜感激。谢谢

Answer 1

根据文档：

角度元素概述

自定义元素会自行引导 - 它们在添加到 DOM 时启动，并在从 DOM 中删除时销毁。将自定义元素添加到任何页面的 DOM 后，它的外观和行为就像任何其他 HTML 元素一样，并且不需要 Angular 术语或使用约定的任何特殊知识。

---

问题是您的代码在销毁组件时未取消订阅，请尝试对该组件中的所有 API 使用

unsubscribe

或

takeUntilDestroyed

。

取消订阅：

private sub: Subscription = new Subscription();

ngOnInit() {
  this.sub.add(this.someService.apiCall().subscribe());
}

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

采取直至销毁：

private destroyRef = inject(DestroyRef);

ngOnInit() {
  this.someService.apiCall().pipe(
    takeUntilDestroyed(this.destroyRef),
  ).subscribe();
}