Angular2路由器附加组件而不是替换它
发布时间:2020-12-17 08:00:59 所属栏目:安全 来源:网络整理
导读:我有一个带有一个路由器插座的Angular2应用程序,根据侧面菜单中单击的链接显示不同的组件。 包含 router-outlet的主要组件的标记。看起来像这样 div *ngIf="authenticated == false" app-login/app-login/divdiv *ngIf="authenticated" div class="page hom
我有一个带有一个路由器插座的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来演示它。
更新: 更新2017-12-13: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |