Javascript 角度元素WebComponents外部DOM更改

TL；DR：删除使用角度元素创建的自定义元素的DOM元素将导致子路由器不加载组件

首先，代码是

遗憾的是，我没有运行stackblitz版本，但在本地，在克隆、npm安装和ng serve之后，它应该可以正常运行

关于一般结构：

该项目显示了Angular应用程序通过元素公开的WebComponent示例。 WebComponent在index.html中使用，它被称为容器应用程序。 这里的用例有点复杂，但是当单击 在两个顶部底部与真实世界的用例相当

通常，这个WebComponent会在AngularJS遗留应用程序中使用。由于两个根视图（overview1 overview2）之间存在许多重叠，因此它用于两个AngularJS组件，即ui路由器处理的导航之间。这意味着，正是这种构造的动作发生了。DOM元素将被删除并重新添加

所以基本上问题是：

如果我从外部删除WebComponent的DOM元素（因此删除CustomElement本身），然后用另一个路由重新添加它，则不会加载该组件的子路由组件。如果有短暂的延迟（50毫秒），一切正常

要重现问题，请执行以下操作：

加载页面并单击“带延迟的开关”按钮

显示详图构件

再次单击“带延迟切换”，切换到其他概览

显示详图构件

=>一切正常

重复相同的步骤，但这次只单击“直接切换”

先前的调查

我已经调试的是路由器。所以我用“启用跟踪”浏览了日志消息 他们似乎没有什么不同。之后，我比较了组件的生命周期和 我注意到的是，在工作示例中，旧的

Detail**1**组件

对象将被销毁，新的

Detail**1**组件

将被创建并随后直接销毁，然后与

Detail**2**组件

相关的所有内容都将被构建

在不起作用的示例中，如下所示： 一个新的

细节**1**组件

将被重新构造并随后销毁。然后旧的

细节**1**组件将被销毁。然后，将不会构造任何与
细节**2**组件相关的内容

因此，路由似乎工作正常，但在这种情况下组件不会加载，这可能是由于一个奇怪的生命周期，因为在DOM中硬删除这些WebComponent会导致视图与ViewModel分离

也许我只是个傻瓜，做了一些根本错误的事情，但我在网上找不到任何关于这个问题的东西，我自己尝试的每一个解决方案都会导致一个类似于建立延迟的解决方法。
你可以找到一个解决方法。
我通过附加一个布尔值强制重新创建DOM对象
指向导航按钮，该按钮将确定DetailComponent
实际上应该被展示出来

<router-outlet *ngIf="shown">



然后，单击按钮将重新评估插座，并重新填充DOM。
这将有效地解决所描述的问题。
在我看来，这不是最干净的解决方案，但比超时更干净
甚至需要从外部申请。
我希望这是有帮助的，也许有人可能会告诉我实际的修复和
不仅仅是解决办法

由于这是我的第一个问题，请毫不犹豫地就正式问题向我提供反馈
外观。
我只能假设：
setTimeout
触发角度变化检测（通过
zonejs
的帮助）。当我们直接操作DOM而不是以角度操作DOM时，它无法识别更改。因此，不延迟地包装一个
setTimeout（）
也可能会起作用。感谢您的输入，如果超时值为0，该示例将不起作用，我需要将其至少设置为~5-10ms。