子路径上未删除Angular 5组件已更改

时间:2018-05-28 05:15:16

标签: angular angular5 parent-child angular-routing metronic

嘿,我的Angular 5 App有问题。我用一些组件路由创建了一个简单的应用程序。路由如下:

{ 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中删除旧的子节点。

enter image description here

如果我在根路由之间切换一切正常。如果我让孩子路线到绝对路线,它也在工作。

的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 Dashboard Theme,我遇到了这个问题。 如果有人有解决方案,请发布:)

更新: 以下是主题的一些链接:

https://keenthemes.com/metronic/documentation.html

https://keenthemes.com/metronic/preview/?demo=demo12

1 个答案:

答案 0 :(得分:0)

我找到了答案! 在我的html文件中,我有一个指令unwraptag。模板需要这个。 我删除它,一切正常。在指令文件中,选择器被标记为eslint错误。这是选择器:&#39; [appunwraptag]&#39;,