要在 Angular 应用程序中根据当前路由动态突出显示活动菜单项，您可以使用 Angular 的内置 Router 模块。这允许您将类应用于活动链接。
以下是具体操作方法。
步骤 1.导入 RouterModule
确保已在 Angular 模块（通常是 app.module.ts）中配置了 RouterModule。
import { RouterModule } from '@angular/router';
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
第 2 步：更新 HTML
使用 routerLinkActive 指令动态地将类应用于活动菜单项。以下是更新导航 HTML 的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.navbar-nav .nav-item a {
color: black;
text-decoration: none;
}
.navbar-nav .nav-item a:hover {
color: #0056b3; /* Optional: Change color on hover */
}
.navbar-nav .home-link i {
color: blue;
}
.active-link {
color: blue !important; /* Customize the active link color */
}
</style>
</head>
<body>
<section class="wrapper megamenu-wraper">
<div class="">
<nav class="container navbar navbar-expand-lg main-menu">
<div class="">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a routerLink="/private/po" routerLinkActive="active-link" class="home-link active">
<i class="fa fa-home"></i>
</a>
</li>
<li class="nav-item">
<a routerLink="dashboard" routerLinkActive="active-link">Dashboard</a>
</li>
<li class="nav-item">
<a routerLink="default" routerLinkActive="active-link">Student List</a>
</li>
<li class="nav-item">
<a routerLink="camps" routerLinkActive="active-link">Activities</a>
</li>
<li class="nav-item">
<a routerLink="camp-attendence" routerLinkActive="active-link">Attendance</a>
</li>
<li class="nav-item">
<a [routerLink]="['/private/po/actvity-camp', 0]" routerLinkActive="active-link">Create Activity</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
解释
- routerLinkActive 指令：此指令将指定的类（在本例中为 active-link）应用于与当前路由匹配的链接。
- routerLink 指令：将链接绑定到路由器路径。
- CSS： active-link 类的样式用来指示活动状态。
步骤 3. 确保路由器模块配置
确保您的 Angular 路由器在您的应用程序模块（通常是 app-routing.module.ts）中正确配置。
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { StudentListComponent } from './student-list/student-list.component';
import { ActivitiesComponent } from './activities/activities.component';
import { AttendanceComponent } from './attendance/attendance.component';
import { CreateActivityComponent } from './create-activity/create-activity.component';
const routes: Routes = [
{ path: 'dashboard', component: DashboardComponent },
{ path: 'default', component: StudentListComponent },
{ path: 'camps', component: ActivitiesComponent },
{ path: 'camp-attendence', component: AttendanceComponent },
{ path: 'private/po/actvity-camp/:id', component: CreateActivityComponent },
{ path: '**', redirectTo: 'dashboard', pathMatch: 'full' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
此设置可确保当您浏览应用程序时，活动链接将突出显示，从而提供更好的用户体验。
4.结果
