Класс Angular Routing routerLinkActive не удаляется с базовой страницы даже при другой маршрутизации ссылок - PullRequest
Новая
       7

Класс Angular Routing routerLinkActive не удаляется с базовой страницы даже при другой маршрутизации ссылок

0 голосов
/ 18 сентября 2018

Я предоставляю простой пример маршрутизации, который хорошо работает.Единственная проблема заключается в том, что routerLinkActive добавляет класс 'baboossa' к любой активной ссылке.Когда я перехожу из дома к другим ссылкам как «о» или «окне», ссылка становится оранжевой (из-за класса baboossa), но я все еще вижу дом также оранжевым.Почему сейчас у меня есть 2 ссылки с добавленными классами из routerLinkActive , и класс не удаляется из дома?

app.component.html 

<ul>
  <li><a [routerLink]="''" routerLinkActive="baboossa">Home</a></li>
  <li><a [routerLink]="'/about'" routerLinkActive="baboossa">About</a></li>
  <li><a [routerLink]="'/window'" routerLinkActive="baboossa">Window</a></li>
</ul>

<router-outlet></router-outlet>

app.module.ts 

import { RouterModule } from '@angular/router';

imports: [
  RouterModule.forRoot([
    {path:'', component: HomeComponent},
    {path:'about', component: AboutComponent},
    {path:'window', component:WindowComponent}
  ])
]

стили.css 

.baboossa {background:orange;}

Результаты:

enter image description here enter image description here enter image description here

Может кто-нибудь указать на проблему, почему я получаю 2 оранжевых фона на других активных ссылках, кроме baseone (дома)?

enter image description here

Ответы [ 3 ]

0 голосов
/ 18 сентября 2018

Вы можете архивировать двумя способами:

  1. Добавить routerLinkActiveOptions [routerLinkActiveOptions]="{ exact: true }" с маршрутизатором LinkActive.

Вот так: [routerLink]="''" [routerLinkActive]="['baboossa']" [routerLinkActiveOptions]="{ exact: true }".

  1. Перенаправьте ваш пустой маршрутизатор path : '' на любой конкретный путь, например '{path:' ', redirectTo:' home '} в модуле вашего маршрутизатора.

Как это: 

[{
    path: '',    
    pathMatch : 'full',
    redirectTo: 'home'
},
{
    path: 'home',    
    component: HomeComponent
}]

и измените [routerLink]="''" на [routerLink]="'home'".

Вот Stackblitz

0 голосов
/ 09 апреля 2019

Вот еще один способ сделать это с именованным путем по умолчанию вместо пустого. Подход RESTful API, при котором URL легко понять 

<ul>
  <li><a [routerLink]="[ 'home' ]" routerLinkActive="baboossa">Home</a></li>
  <li><a [routerLink]="[ 'about' ]" routerLinkActive="baboossa">About</a></li>
  <li><a [routerLink]="'[ 'window' ]" routerLinkActive="baboossa">Window</a></li>
</ul>

<router-outlet></router-outlet>

А потом 

import { RouterModule } from '@angular/router';

imports: [
  RouterModule.forRoot([
    {path:'home', component: HomeComponent},
    {path:'about', component: AboutComponent},
    {path:'window', component:WindowComponent}
    {path:'**', redirectTo: 'home'}
  ])
]
0 голосов
/ 18 сентября 2018

Я думаю, что вы можете проверить ниже ссылку

https://stackblitz.com/edit/angular-router-basic-example-jufxu8?file=app/app.routing.module.ts

Для более Угловая маршрутизация

...