Компонент Angular 5, не удаленный на дочернем маршруте, изменен

Привет, у меня проблема с моим приложением 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']"

В качестве подсказки: ive сначала разработала это приложение без какого-либо сложного дизайна. Все работает. Теперь я хотел интегрировать Metronic Dashboard Theme, и у меня возникла эта проблема. Если у кого-то есть решение, выложите его :)

ОБНОВЛЕНИЕ: Вот несколько ссылок на тему:

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

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


angular parent-child angular-routing metronic angular5
person Tanktiger    schedule 28.05.2018    source источник
comment
Возможный дубликат Маршрутизатор Angular2 добавляет компонент вместо его замены   -  person Daniel B    schedule 28.05.2018
comment
Да, я тоже видел этот вопрос. Я не тестировал все решения, но я на нем.   -  person Tanktiger    schedule 28.05.2018
comment
Суть в том, что, вероятно, где-то есть тихая ошибка, из-за которой рендерер зависает! :(   -  person Daniel B    schedule 28.05.2018

Ответы (1)


arrow_upward
0
arrow_downward

я нашел ответ! в моих html файлах у меня была директива unwraptag. Это было необходимо для шаблона. Я удалил его, и все работает нормально. В файле директивы селектор помечен как ошибка eslint. Это был селектор: '[appunwraptag]',

person Tanktiger    schedule 28.05.2018