我有一个带有一个路由器插座的 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 中将 home 组件呈现在演示组件的上方。单击它们几次将产生这样的 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>
在路由之间切换时没有替换组件,而是添加了组件的另一个“实例”?