TL; DR：删除使用Angular Elements创建的自定义元素的DOM元素将导致子路由器不加载组件
首先，代码是available at Github。
可悲的是，我没有运行stackblitz版本，但在本地进行克隆，npm安装和ng服务后，它应该可以正常运行。
关于一般结构：
该项目显示了Angular应用程序通过Elements公开的WebComponent的示例。该WebComponent用于index.html，称为容器应用程序。这里的用例是一些构造的，但是单击时会发生导航顶部两个底部的位置可与实际用例相提并论。
通常，此WebComponent将在AngularJS旧版应用程序中使用。由于两个根视图（overview1 overview2）之间有很多重叠，因此它在两个uiular-router处理的导航之间的AngularJS组件中使用。这意味着，正是这种构造的动作发生了。 DOM元素将被删除并重新添加。
所以基本上问题是：
如果我从外部删除WebComponent的DOM元素（因此删除CustomElement本身），然后使用另一条路由将其重新添加，则不会加载此子路由组件。如果有短暂的延迟（50毫秒），则一切正常。
重现问题：
=>一切正常
重复相同的步骤，但是这次仅单击“直接切换”。
先前调查
我已经调试的是路由器。因此，我通过“启用跟踪”浏览了日志消息他们似乎没有什么区别。之后，我比较了组件的生命周期和我注意到的是，在工作示例中，旧的Detail**1**Component对象将被破坏，新的Detail**1**Component对象将被创建并在之后直接销毁，然后所有与Detail**2**Component有关的东西都将被构造。
在不起作用的示例中是这样的：新的Detail**1**Component将再次构建并随后销毁。然后旧的Detail**1**Component将被销毁。这样就不会考虑Detail**2**Component的构造。
所以路由似乎可以正常工作，但是在这种情况下，可能由于奇怪的生命周期而无法加载组件，这是由于硬删除DOM中的这些WebComponent导致视图与ViewModel的分离。
也许我只是愚蠢，做了一些根本上是错误的事情，但是我在网络上找不到关于此问题的任何信息，而我自己尝试的每个解决方案都导致了诸如建立延迟的变通方法。
您可以找到解决方法available on Github。我通过附加一个布尔值来强制重新创建DOM对象导航按钮，它将确定DetailComponent是否应该真正显示出来。
<router-outlet *ngIf="shown">
然后，单击按钮，将重新评估插座，并重新填充DOM。这将有效缓解所描述的问题。我认为这不是最干净的解决方案，但是比超时更干净，甚至需要从外面申请。我希望这会有所帮助，也许有人会指出我的实际解决方案，不只是解决方法。
由于这是我的第一个问题，请毫不犹豫地向我提供有关正式外观。