【发布时间】：2018-05-28 05:15:16
【问题描述】：
嘿，我的 Angular 5 应用程序有问题。我创建了一个带有一些组件路由的简单应用程序。路由看起来像：
{ path: '', component: SetupComponent, pathMatch: 'full' }, // here we can add a landingpage
{ path: 'setup', component: SetupComponent },
{
path: 'lan/:reference', component: LanComponent, // use special layout here which is defined in LanComponent
children: [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'attendees', component: AttendeesComponent },
{ path: 'games', component: GamesComponent },
{ path: 'royal-beefs', component: RoyalBeefsComponent },
]
},
{path: '**', component: SetupComponent}
路由运行就像一个魅力，但如果我在这些子路由之间切换，旧子路由不会从 dom 中删除。
如果我在根路由之间切换，一切正常。如果我将子路由设置为绝对路由，它也可以工作。
index.html
<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
<div class="m-grid m-grid--hor m-grid--root m-page">
<app-root></app-root> <!-- app.component.ts -->
</div>
</body>
app.component.html
<router-outlet></router-outlet>
lan.component.html
<app-header-nav></app-header-nav>
<!-- begin::Body -->
<div class="m-grid__item m-grid__item--fluid m-grid m-body">
<div class="m-grid__item m-grid__item--fluid m-wrapper">
<router-outlet></router-outlet>
</div>
</div>
<!-- end:: Body -->
<app-footer></app-footer>
在games.component.html 和其他只有内容。 链接将使用 routerLink 生成，例如：
[routerLink]="['/lan', params.reference, 'dashboard']"
[routerLink]="['/lan', params.reference, 'attendees']"
作为提示：我首先开发了这个应用程序，没有任何复杂的设计。一切正常。现在我想集成 Metronic 仪表板主题，我遇到了这个问题。 如果有人有解决方案，请发布:)
更新： 以下是主题的一些链接：
【问题讨论】：
-
是的，我也看到了这个问题。我没有测试过所有解决方案，但我正在测试它。
-
重点是某处可能存在导致渲染器挂起的静默错误！ :(
标签： angular angular5 parent-child angular-routing metronic