Angular 8 无routerLink的a标签子路由激活时保留active类的实现方法

方案1：模板直接绑定（适合子菜单数量少的场景） #

• 第一步：修正子菜单的模板引用变量名，避免重名冲突
  给子菜单的routerLinkActive导出实例设置唯一的引用名：

  <a class="nav-link" routerLink="/project/list" #projectsList="routerLinkActive" routerLinkActive="active">
    <span class="fa fa-lg site_sidebar-main_icon site_sidebar-main_link--bu"> </span>
    <span class="site_sidebar-main_link-title">Projects list</span>
  </a>
  <a class="nav-link" routerLink="/resource/list" #resourcesList="routerLinkActive" routerLinkActive="active">
    <span class="fa fa-lg site_sidebar-main_link--resources"></span><span class="site_sidebar-main_link-title">Resources</span>
  </a>
  

• 第二步：给父菜单绑定激活类
  通过[ngClass]判断子路由是否激活，只要任意子路由处于激活状态，就给父菜单添加active类：

  <a class="nav-link" 
    href="#pageSubmenu" 
    data-toggle="collapse" 
    aria-expanded="false" 
    expandMenu
    [ngClass]="{'active': projectsList.isActive || resourcesList.isActive}">
      <span class="fa fa-lg site_sidebar-main_icon site_sidebar-main_link--dashboard"></span>
      <span class="site_sidebar-main_link-title">Projects Master</span>
      <span class="fa fa-lg fa-caret-left site_sidebar-main_down-icon"></span>
  </a>
  

  原理：routerLinkActive导出实例的isActive属性不受菜单折叠状态影响，只要路由匹配就为true，父菜单的高亮状态会一直保留。

方案2：组件内路由判断（适合子菜单多、层级深的场景） #

如果子菜单数量多，模板变量维护成本高，可以直接在组件内注入路由服务判断：

• 第一步：组件中注入Router

  import { Router } from '@angular/router';
  
  @Component({/* 组件配置 */})
  export class SidebarComponent {
    constructor(public router: Router) {}
  }
  

• 第二步：父菜单绑定路由判断逻辑
  直接判断当前URL是否匹配子路由的前缀即可：

  <a class="nav-link" 
    href="#pageSubmenu" 
    data-toggle="collapse" 
    aria-expanded="false" 
    expandMenu
    [ngClass]="{'active': router.url.startsWith('/project/') || router.url.startsWith('/resource/')}">
  

可选体验优化 #

如果需要路由激活时自动展开父菜单，可额外绑定展开状态：

<!-- 父菜单修改aria-expanded -->
<a ... [attr.aria-expanded]="projectsList.isActive || resourcesList.isActive">

<!-- 子菜单绑定展开类 -->
<ul class="submenu" [ngClass]="{'collapse': !(projectsList.isActive || resourcesList.isActive), 'show': projectsList.isActive || resourcesList.isActive}" id="pageSubmenu">

内容的提问来源于stack exchange，提问作者Akanksha Mohanty