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

Итак, у меня есть приложение 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


typescript angular angular-routing angular-router-guards angular-router
person KLTR    schedule 11.01.2018    source источник
comment
Похоже, вы получаете ошибки от вашего браузера. Откройте консоль разработчика (F12 в Chrome), чтобы узнать, в чем причина.   -  person Z. Bagley    schedule 12.01.2018
comment
Можете ли вы показать нам шаблоны, которые содержат розетки маршрутизатора?   -  person ConnorsFan    schedule 12.01.2018
comment
@ Z.Bagley Да, в этом была проблема .. можете ли вы объяснить мне, почему это происходит? я имею в виду, почему ошибка вызывает этот эффект?   -  person KLTR    schedule 12.01.2018
comment
Взгляните на этот пост. Один из ответов относится к этой проблеме и к другой.   -  person ConnorsFan    schedule 12.01.2018
comment
Компилятор Angular на самом деле не знает, как будет выглядеть DOM, прежде чем он отобразит его, и если ссылка открывает DOM с ошибкой, он пытается построить DOM для нового компонента и терпит неудачу на полпути. Много раз компилятор перестает работать, и после этого вы не можете маршрутизировать большую часть своего приложения, в других случаях появляется несколько выходов маршрутизатора, в других случаях экран становится белым ... просто один из признаков того, что вы написали код сломать что-нибудь ;)   -  person Z. Bagley    schedule 12.01.2018

Ответы (2)


arrow_upward
0
arrow_downward

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

person mth khaled    schedule 11.01.2018

arrow_upward
0
arrow_downward

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

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

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

person Chirag Patel    schedule 30.04.2020