Блог

Вот моя проблема-я создал навигационную панель с директивой 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;
}
 

Пути маршрутизации: приложение.маршрутизация.модуль.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]=»{точно: верно}», но по-прежнему ничего не изменилось, а также я попытался сделать свой активный класс css глобальным, но ничего не изменилось. Я что-нибудь здесь упускаю ?

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

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

Опубликуйте этот ответ, если это может кому-нибудь помочь в будущем.