Angular2 路由器附加组件而不是替换它

Question

我有一个 Angular2 应用程序，它有一个路由器导出，根据在侧面菜单中单击哪个链接显示不同的组件。

包含 <router-outlet> 的主要组件的标记看起来像这样

<div *ngIf="authenticated == false">
  <app-login></app-login>
</div>
<div *ngIf="authenticated">
  <div class="page home-page">
    <header class="header">
      <app-navbar></app-navbar>
    </header>
    <div class="page-content d-flex align-items-stretch">
      <div class="sidebar-container">
        <app-sidebar-menu></app-sidebar-menu>
      </div>
      <div class="content-inner">
      <app-page-header></app-page-header>
        <div id="sub-content">
          <router-outlet></router-outlet>
        </div>
        <app-footer></app-footer>
      </div>
    </div>
  </div>
</div>

如果我单击Demo 链接，演示组件会呈现，但如果我随后单击Home 链接，home 组件会在 DOM 中的演示组件上方呈现.单击它们几次将产生这样的 DOM

<div _ngcontent-c0="" id="sub-content">
    <router-outlet _ngcontent-c0=""></router-outlet>
  <app-home _nghost-c6="">...</app-home>
  <app-demo _nghost-c7="">...</app-demo>
  <app-home _nghost-c6="">...</app-home> <!-- Why so many here? Should be just either one <app-home> or <app-demo>  -->
  <app-demo _nghost-c7="">...</app-demo>
  <app-home _nghost-c6="">...</app-home>
  <app-demo _nghost-c7="">...</app-demo>
  <app-footer _ngcontent-c0="" _nghost-c5="">...</app-footer>
</div>

路由定义为

export const router: Routes = [
    { path: 'demo', component: DemoComponent, canActivate: [AuthGuard] },
    { path: 'home', component: HomeComponent, canActivate: [AuthGuard] }
]

为什么 <router-outlet>不替换组件，而是在切换路由时添加组件的另一个“实例”？

Answer 1

通过排除法，我发现问题的罪魁祸首是我的app.module.ts 中的BrowserAnimations 模块。通过从我的 imports 中删除它，问题就消失了。我将研究创建一个 Plunker 来演示它。

更新:这在 Github issue 中有描述。 .

2017-12-13 更新:现在已通过此 PR 解决此问题，fix(animations): properly recover and cleanup DOM when CD failures occur .