如何解决如何添加基于 angular 的 URL 的活动导航?
这是我的问题-- 我创建了一个带有 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 类设置为全局仍然没有任何变化。我在这里遗漏了什么吗?
解决方法
由于没有响应,我通过使用父类导航到活动类找到了自己的答案
.header-links .active {
color: black;
text-decoration: underline;
}
发布此答案,如果它可能对将来的任何人有所帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。