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

Question

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

1

Я предоставляю простой пример маршрутизации, который хорошо работает. Единственная проблема заключается в том, что routerLinkActive добавляет класс "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}
  ])
]

styles.css

.baboossa {background:orange;}

Результаты:

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

Deadpool 18 сен. 2018, в 09:40

Источник

0

{path:'', component: HomeComponent} должен быть {path:'', component: HomeComponent, pathMatch: 'full' }
Stavm 18 сен. 2018, в 07:06
0

попробовал, не сработало. Тот же результат.
Deadpool 18 сен. 2018, в 07:09
0

замените {path:'', component: HomeComponent} на {path:'home', component: HomeComponent}
Abhishek Ekaanth 18 сен. 2018, в 07:21
1

спасибо @AbhishekEkaanth - это сработало. Я создал еще одну строку вместе с 1-й пустой маршрутизацией по умолчанию - это сработало хорошо.
Deadpool 18 сен. 2018, в 07:34

Показать ещё 2 комментария

Теги:

angular

javascript

angular-routing

3 ответа

1

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

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

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

Syamkumar S 18 сен. 2018, в 04:45

0

Здесь другой способ сделать это с именованным путем по умолчанию вместо пустого. Подход 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'}
  ])
]

Dler Hasan 09 апр. 2019, в 10:18

Ещё вопросы

{path:'', component: HomeComponent} должен быть {path:'', component: HomeComponent, pathMatch: 'full' }
попробовал, не сработало. Тот же результат.
замените {path:'', component: HomeComponent} на {path:'home', component: HomeComponent}
спасибо @AbhishekEkaanth - это сработало. Я создал еще одну строку вместе с 1-й пустой маршрутизацией по умолчанию - это сработало хорошо.

Shashikant Devani · Accepted Answer · 2018-09-18T06-12-00.000Z

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

Добавьте routerLinkActiveOptions [routerLinkActiveOptions]="{ exact: true }" с помощью routerLinkActive.

Например: [routerLink]="''" [routerLinkActive]="['baboossa']" [routerLinkActiveOptions]="{ exact: true }".

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

Как это:

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

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

Вот Stackblitz

Более подробная информация об этом подходе находится в Angular Guide .