向后导航导致更改检测中断 Angular 个元素

Question

赏金将在 7 小时后到期。 此问题的答案有资格获得+50声望赏金。 Chris想提请更多人注意这个问题。

我正在使用Angular 元素在自定义 ThingsBoard 小部件中使用我的组件。 这些元素是在ngDoBootstrap()内部创建的，如下所示：

const newCustomElement = createCustomElement(CustomElementComponent, {
    injector: this.injector,
});
customElements.define("new-custom-element", newCustomElement);

在 ThingsBoard 小部件中，我可以通过“资源”选项卡导入我的元素的已编译 JavaScript 代码，并在小部件的onInit() function 中实例化它们，如下所示：

self.onInit = function() {
    element = document.createElement(
        "new-custom-element");
    self.ctx.$container.append(element);
}

虽然这工作得很好并且使我能够在我的小部件中使用 Angular 组件，但我注意到一个奇怪的问题，当从 ThingsBoard 仪表板 state 导航回到另一个仪表板 state 时有时会出现这个问题。有时在导航回来后，我的小部件似乎加载得很好但随后整个变化检测似乎被打破了。 只要我不在我的组件中手动调用detectChanges() ，该组件有时就会在 UI 中完全冻结并且不再对任何用户交互（例如单击事件）做出反应。 只有刷新页面才能解决此问题。

是什么导致了这个问题，我能做些什么来解决这个问题？

Answer 1

你有没有试过这样的：

ngAfterViewChecked() {
  this.cd.detectChanges();
}

或者

constructor(private appRef: ApplicationRef) { }

ngAfterViewInit() {
this.appRef.bootstrap(CustomElementComponent);
}

祝你好运。