#angular #angular-routing #angular-directive #routerlink #routerlinkactive
Вопрос:
Вот моя проблема-я создал навигационную панель с директивой 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 глобальным, но ничего не изменилось. Я что-нибудь здесь упускаю ?
Ответ №1:
Поскольку ответа не последовало, я нашел ответ, используя родительский класс для перехода к активному классу
.header-links .active {
color: black;
text-decoration: underline;
}
Опубликуйте этот ответ, если это может кому-нибудь помочь в будущем.