0

这是我的问题—— 我创建了一个带有 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 类设置为全局仍然没有。我在这里错过什么了吗？

4

1 回答 1

1

由于没有响应，我通过使用父类导航到活动类找到了自己的答案

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

发布此答案，如果将来可能对任何人有所帮助。

于 2021-03-13T06:25:31.020 回答