在路由器出口呈现的角度7个重复组件

Question

仅在某些情况下会发生这种情况（通常是在早上打开应用程序之后。）>

我们正在使用SwUpdate来更新应用程序，并且此行为似乎与更新时间一致。结果html看起来像这样：

<app-root _nghost-vrt-c0="" ng-version="7.2.15">
  <router-outlet _ngcontent-vrt-c0=""></router-outlet>
  <app-layout _nghost-vrt-c4="">
    <div _ngcontent-vrt-c4="" class="app-class">
          <router-outlet _ngcontent-vrt-c4=""></router-outlet>
          <app-component-1 _nghost-vrt-c7="">
          </app-component-1>
          <app-component-1 _nghost-vrt-c7="">
          </app-component-1>
    </div>
  </app-layout>
</app-root>
问题是重复的app-component-1。在正常情况下，它仅渲染一次。我一直找不到解决方案，甚至无法描述这个问题。感谢任何帮助。

相关的路由规则：

const routes: Routes = [
  {
    path: '',
    component: Layout,
    canActivate: [AuthGuard],
    children: [
      { path: 'home', loadChildren: './home/home.module#HomeModule'},
      { path: 'otherRoute', loadChildren: './otherRoute/otherRoute.module#OtherRouteModule'},
      { path: '', redirectTo: 'home', pathMatch: 'full' },
    ]
  }
  { path: 'under-construction', component: UnderConstructionComponent, data: { title: 'Under Construction' } },
  { path: '**', redirectTo: 'under-construction' },
]
这里是布局模板：

<div class="tm-app">
<div >
  <app-menu></app-menu>
  <div>
    <div>
      <app-top-bar></app-top-bar>
    </div>
    <router-outlet></router-outlet>
  </div>
</div>

我尽可能地从布局和输出中清理代码，以确保代码库的安全。我正在编辑此问题以解决问题。因为我还没有找到解决方案。这样可以吗？

仅在某些情况下会发生这种情况（通常是在早上打开应用程序之后）。我们正在使用SwUpdate来更新应用程序，并且此行为似乎与更新时间一致。结果...

Answer 1

在我的特定情况下，问题与实现CanActivate https://angular.io/api/router/CanActivate的路由保护有关。当守卫返回false时，该路由无法激活（但已创建）。如果同时，警卫也重定向到另一条路线。然后创建一个重复的路由器出口组件。