Angular 6 - Как установить активный элемент родительского меню с помощью routerLinkActive при нажатии на его дочерний элемент меню?

Я использую Angular 6, и у меня возникла проблема с меню навигации.

Когда я нажимаю на дочерний элемент, активным становится только дочерний элемент, а не родительский при использовании routerLinkActive.

Мне интересно, как я могу активировать родительский класс элемента при выборе его дочернего элемента в Angular 6?

Допустим, я нажимаю «Уход за полом», который является дочерним элементом «Службы». Будет активировано только обслуживание этажа, но не услуги. Я хотел бы, чтобы кнопка «Службы» была активной с помощью routerLinkActive при нажатии любого из ее дочерних элементов.

Меню навигации

<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 { }

angular routerlinkactive
person leonardofjr    schedule 19.10.2018    source источник
comment
Вам нужно будет добавить код к вашему вопросу, чтобы мы могли видеть, какой метод вы используете для установки родителя из документации: angular.io/api/router/RouterLinkActive   -  person Brandon    schedule 19.10.2018
comment
@Brandon Я добавил код для модуля навигации и маршрутизации   -  person leonardofjr    schedule 20.10.2018
comment
Брэндон, ты абсолютно прав. Ваш код работает, но ум - нет. Я сравнил ваш код с моим, и единственное различие, которое я увидел, это то, что у меня есть routerLinkActive в теге ‹a›. Я переместил все routerLinkActive и routerLinks в собственный тег ‹li›, чтобы каждый тег был обернут вокруг тега ‹li›, и это сработало! Спасибо, дружище!   -  person leonardofjr    schedule 20.10.2018

Ответы (3)


arrow_upward
6
arrow_downward

Поэтому, когда я сравнил свой код с https://stackblitz.com/edit/parent-child-active?file=src%2Fapp%2Fapp.component.css это.

Единственное отличие, которое я смог найти, - это то, что для атрибутов routerLinks и routerLinkActive я был установлен в теги a.

Поэтому я решил структурировать его так:

<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>
person leonardofjr    schedule 20.10.2018
comment
Ага, это странно. Я изменил StackBlitz, чтобы поместить директивы routerLinkActive в теги привязки, и он по-прежнему работает, как ожидалось. - person Brandon; 20.10.2018

arrow_upward
2
arrow_downward

Если вы хотите, чтобы родительский класс оставался активным, пока дочерний класс тоже, вам необходимо установить routerLink для дочернего как / parent / child. Если начало активного routerLink совпадает в точности с другим, оба станут активными:

<div>
    <a routerLink="/Parent" routerLinkActive="active">Parent</a>
    <a routerLink="/Parent/Child" routerLinkActive="active">Child</a>
</div>
person F Huerta    schedule 19.10.2018
comment
@F Huerta Я внес изменения в свой исходный пост. Вы можете увидеть меню навигации и модуль маршрутизации. Дайте мне знать, если вам интересно посмотреть что-нибудь еще. Похоже, я сделал, как вы предложили, но без изменений, проблема остается. Когда я щелкаю дочерний элемент родительского элемента; активным будет только дочерний элемент, а не родительский. - person leonardofjr; 20.10.2018
comment
@leonardofjr Этот ответ должен работать. Вот пример StackBlitz с точно используемым методом: stackblitz.com/edit/parent-child-active < / а> - person Brandon; 20.10.2018

arrow_upward
2
arrow_downward

Вы можете добиться этого с помощью переменной шаблона. Проверьте переменную #rla в дочернем компоненте.

<li [ngClass]="{ 'is-expanded': rla.isActive }">
  <a>Parent</a>
  <ul>
    <li>
      <a routerLink="/child" routerLinkActive="active" #rla="routerLinkActive">Child</a>
    </li>
  </ul>
</li>
person Vibhor Dube    schedule 05.06.2020