Как добавить активную навигацию на основе URL в angular?

Вот моя проблема - я создал панель навигации с директивой RouterLink, и я хотел, чтобы моя навигационная ссылка была активной для текущего пути URL, поэтому я использую директиву RouterLinkActive. Но мой активный класс CSS не обновляется ни по одному пути URL. Не знаю почему. Есть ли решение этой проблемы?

Вот мой код

Панель навигации: app.component.html

<nav class="header-links">
      <img src="../assets/images/logo.png" alt="" class="logo">
      <a routerLink="/contact" routerLinkActive="active" style="margin-right: 35px;">Contact us</a>
      <a routerLink="/product" routerLinkActive="active">Our Product</a>
      <a routerLink="/about" routerLinkActive="active">About us</a>
      <a routerLink="/home" routerLinkActive="active">Home</a> 
</nav>

Применяемый CSS: app.component.css

.active {
    color: black;
    text-decoration: underline;
}

Пути маршрутизации: app.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutComponent } from './component/about/about.component';
import { ContactComponent } from './component/contact/contact.component';
import { HomeComponent } from './component/home/home.component';
import { ProductComponent } from './component/product/product.component';

const routes: Routes = [
  {path:'', redirectTo:'home', pathMatch:'full'},
  {path:'home', component: HomeComponent},
  {path:'about', component: AboutComponent},
  {path:'product', component: ProductComponent},
  {path:'contact', component: ContactComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Я попробовал [routerLinkActiveOptions] = {Exact: true}, но ничего не изменилось, а также я попытался сделать свой активный класс css глобальным, но все равно ничего. Я что-то упустил?


angular angular-routing angular-directive routerlinkactive routerlink
person Aasif    schedule 28.02.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Поскольку ответа нет, я нашел ответ, используя родительский класс для перехода к активному классу

.header-links .active {
    color: black;
    text-decoration: underline;
 }

Публикация этого ответа, если это может помочь кому-нибудь в будущем.

person Aasif    schedule 13.03.2021