Angular 6-如何在单击其子菜单项时使用routerLinkActive将父菜单项设置为Active?

问题描述

我正在使用Angular 6，但在导航菜单方面遇到了问题.

I'm using Angular 6 and I've ran into an issue regarding my navigation menu.

当我单击子项时，使用routerLinkActive时，只有子项设置为活动状态，而不是父项.

When I click on a child-item, only the child item is set to active and not the parent when using routerLinkActive.

我想知道如何在Angular 6中选择其父项时将其设置为活动状态?

I'm wondering how I could set the parent item class to active when selecting its child item in Angular 6?

可以说，我单击服务"的子项地板维护".仅地板维护"将设置为活动状态，而服务"则未设置.我想在单击其任何子项时使用routerLinkActive激活服务"按钮.

Lets say I click Floor Maintenance which is the child of Services. Only Floor Maintenance will be set to active but not Services. I'd like to have the Services Button active using routerLinkActive when clicking any of its child items.

<nav class="navbar navbar-expand-lg navbar-light bg-white thick-border-bottom">
  <div class="container">
  <a class="navbar-brand" routerLink=""><img id="logo" class="img-fluid" src="./assets/logo.svg" alt=""></a>
  <button class="navbar-toggler my-3" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" routerLink="" routerLinkActive="active" [routerLinkActiveOptions]={exact:true}>Home<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/about" routerLinkActive="active">About</a>
      </li>

        <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" routerLink="services" routerLinkActive="active" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">
            Services
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" routerLink="services/janitorial-services" routerLinkActive="active">Janitorial Services</a>
            <a class="dropdown-item" routerLink="services/floor-maintenance" routerLinkActive="active">Floor Maintenance</a>
            <a class="dropdown-item" routerLink="services/green-cleaning-services" routerLinkActive="active">Green Cleaning</a>
          </div>
        </li>

      <li class="nav-item">
        <a class="nav-link" routerLink="/our-difference" routerLinkActive="active">Our Difference</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/our-clients" routerLinkActive="active">Our Clients</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/contact" routerLinkActive="active">Contact</a>
      </li>
    </ul>
  </div>
  </div>

</nav>

路由模块

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './frontend/pages/about/about.component';
import { HomeComponent } from './frontend/pages/home/home.component';
import { ServicesComponent } from './frontend/pages/services/services.component';
import { JanitorialServicesComponent } from './frontend/pages/services/subpages/janitorial-services/janitorial-services.component';
import { ServiceAreasComponent } from './frontend/pages/service-areas/service-areas.component';
import { OurClientsComponent } from './frontend/pages/our-clients/our-clients.component';
import { ContactComponent } from './frontend/pages/contact/contact.component';
import { FloorMaintenanceComponent } from './frontend/pages/services/subpages/floor-maintenance/floor-maintenance.component';
import { GreenCleaningServicesComponent } from './frontend/pages/services/subpages/green-cleaning-services/green-cleaning-services.component';
import { OurDifferenceComponent } from './frontend/pages/our-difference/our-difference.component';

const routes: Routes = [
  { path: '', redirectTo: '/', pathMatch: 'full' },
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'services', component: ServicesComponent,
    children: [
      {path: "janitorial-services", component: JanitorialServicesComponent},
      { path: "green-cleaning-services", component: GreenCleaningServicesComponent},
      { path: "floor-maintenance", component: FloorMaintenanceComponent}
    ]
  },
  { path: 'our-difference', component: OurDifferenceComponent },
  { path: 'our-clients', component: OurClientsComponent },
  { path: 'contact', component: ContactComponent }
];
@NgModule({
  exports: [RouterModule],
  imports: [RouterModule.forRoot(routes)],
})


export class AppRoutingModule { }

推荐答案

因此，当我将代码与 https://stackblitz.com/edit/parent-child-active?file=src%2Fapp%2Fapp.component.css .

我能找到的唯一区别是我设置为a标签的routerLinks和routerLinkActive属性.

The only difference I could find is that the routerLinks and routerLinkActive attributes that I was set to the a tags.

所以我决定改成这样的结构:

So i decided to to structure it like this instead:

<ul>
  <li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
    <a href="#" routerLink="/">Home</a>
  </li>
  <li  routerLinkActive="active">
    <a href="#" routerLink="/parent">Parent Component</a>
    <ul>
      <li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
        <a href="#" routerLink="/parent/child">Child Component</a>
      </li>
    </ul>
  </li>

</ul>

这篇关于Angular 6-如何在单击其子菜单项时使用routerLinkActive将父菜单项设置为Active?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！