Angular Material mat-nav-list激活路由高亮的简洁实现方法问询

问题分析 #

你当前的实现虽能满足需求，但重复定义#rla1、#rla2这类模板引用变量过于冗余，核心原因是未利用Angular的列表循环能力批量渲染导航项。

优化方案1：用数组循环简化代码 #

首先在组件类中定义导航项数组：

// 组件.ts文件
navItems = [
  { path: '/events', label: 'Events' },
  { path: '/contact', label: 'Contact' },
  { path: '/map', label: 'Map' }
];

然后根据Angular版本选择循环语法渲染模板，无需单独定义每个模板引用变量：

<!-- Angular 17+ 使用@for语法 -->
<mat-nav-list>
  @for (item of navItems; track item.path) {
    <a mat-list-item 
       [routerLink]="item.path" 
       routerLinkActive
       [activated]="$any(routerLinkActive).isActive">
      {{ item.label }}
    </a>
  }
</mat-nav-list>

<!-- Angular 16及以下 使用*ngFor语法 -->
<mat-nav-list>
  <a mat-list-item 
     *ngFor="let item of navItems; trackBy: trackByPath"
     [routerLink]="item.path" 
     routerLinkActive
     [activated]="$any(routerLinkActive).isActive">
    {{ item.label }}
  </a>
</mat-nav-list>

若使用*ngFor，可在组件类中添加trackBy函数提升渲染性能：

trackByPath(index: number, item: {path: string}): string {
  return item.path;
}

补充说明 #

• 你之前用自定义类+!important无效，是因为Angular Material的mat-list-item对激活状态的样式有更高优先级的内部封装，官方提供的[activated]输入属性会触发组件内置的激活样式逻辑，能统一匹配Material设计风格的文字、背景色表现。
• 模板中$any(routerLinkActive).isActive的写法是为了避免类型断言报错，若需要类型提示，可给导航项定义TS接口并配合指令类型声明。

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