我有一个带有一个路由器插座的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链接，则主组件将呈现在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>不替换组件，而是在路由之间切换时添加组件的另一个“实例”？
通过使用消除方法，我发现问题的罪魁祸首是app.module.ts中的BrowserAnimations模块。通过从我的导入中删除它，问题就消失了。我将研究创建一个Plunker来演示它。
原文链接：https://www.f2er.com/angularjs/143850.html更新：
这在Github issue中描述。
更新2017-12-13：
现在已经通过此PR，fix(animations): properly recover and cleanup DOM when CD failures occur修复了这个问题。
