Angular 子组件处于活动状态时路由器链接处于活动状态

如果用户转到em或ec组件，我希望li bg类保留在dashbord菜单链接中。 我无法删除[routerLinkActiveOptions]=“{exact:true}”，因为这样它将对以/dashboard开头的所有链接处于活动状态 有办法吗

仪表板主页HTML

{ 
    path: 'dashboard',
    component: DashboardComponent, 
    children: [
        {
            path: '',
            component: DashboardHomeComponent,
            pathMatch: 'full',
        },
        {
            path: 'em',
            component: EmComponent,
        }
        {
            path: 'ec',
            component: EcComponent,
        }
    ]
}

您还可以使用指令和类添加/删除一个或多个带有parant html标记的css类。在本例中，当某个组件方法（

handleActiveClass

）返回

true

时，就会添加一个css类，反之亦然。通过这种方式，您可以根据用户当前的子页面控制何时添加或删除父类

仪表板组件TS：

dashboard/ is home
dashboard/em is em component
dashboard/ec is e component

仪表板组件HTML：

import {Location} from '@angular/common';

class DashboardComponent{

   constructor(private location: Location) {

   }

   handleActiveClass(){
     let relativePath: string = this.location.path();
     return relativePath === '/dashboard/em' || relativePath === '/dashboard/ec';
   }

}

仪表板

---

您可以使用

routerLinkActive=“router link active”

激活当前活动链接

dashboard/ is home
dashboard/em is em component
dashboard/ec is e component

import {Location} from '@angular/common';

class DashboardComponent{

   constructor(private location: Location) {

   }

   handleActiveClass(){
     let relativePath: string = this.location.path();
     return relativePath === '/dashboard/em' || relativePath === '/dashboard/ec';
   }

}

<a [ngClass]="{'li-bg':handleActiveClass()}"
   routerLink="/">Dashboard</a>