Угловая маршрутизация "открывает" новую страницу поверх предыдущей и продолжает укладываться в каждом действии маршрута

Question

Так что у меня есть приложение angular4, использующее import {RouterModule, Routes } from '@angular/router'

моя конфигурация маршрутов настроена так:

const appRoutes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full',canActivate: [AuthGuard]},
  {path:'login', component:LoginComponent},  
  {path:'home', component:HomeComponent, canActivate: [AuthGuard]},  
  {path:'profile', component:UserProfileComponent, canActivate: [AuthGuard] },
  {path:'record', component:RecordComponent, canActivate: [AuthGuard]},
]

в моей навигационной панели HTML я использую

<ul class="navbar-nav ml-auto">
            <li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}">
                <a [routerLink]="['/home']" class="nav-link"><i class="fas fa-home fa-2x"></i></a>
            </li>
            <li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}">
                <a [routerLink]="['/profile']" class="nav-link"><i class="fas fa-user fa-2x"></i></a>
            </li>
        </ul>

прокладывать маршрут между моими страницами. Проблема в том, что каждый раз, когда я нажимаю на ссылку в навигационной панели, новая страница появляется, но она находится поверх предыдущей, я имею в виду, если прокручивать страницу вниз, я вижу предыдущую страницу (но навигационная панель не дублируется)

не уверен, что это полезно, но я использую <router-outlet> внутри моего app-component.html

Answer 1

Ошибка может привести к прерыванию отображения одного компонента в маршрутизаторе, попробуйте проверить, есть ли ошибки в javascript консоли при переключении с одной ссылки на другую.

Answer 2

Это потому, что вы разместили html для входа в app.component.html. заменяет шаблон текущего маршрута, за исключением того, что весь html в этом файле является постоянным.

Вы можете создать отдельный компонент входа в систему. По умолчанию перейдите к компоненту входа в систему. Не сохраняйте логин html в app.component.html

Я описал компонент входа в систему, это один из примеров здесь.