Angular 4路由：为层级嵌套的父<li>元素设置激活链接样式

这个需求在Angular里有几种优雅的实现方式，我给你列几个最常用的方案：

方案一：利用routerLinkActive模板变量 + @ViewChildren #

这个方法是通过监听所有子链接的激活状态，只要有一个子路由激活，就给父元素加上样式。

模板代码： #

<li class="category-container main-menu-link" 
    [ngClass]="{'your-active-class': hasActiveChildLink()}">
  <div class="category">
    <i class="category-icon fa fa-film"></i>
  </div>
  <ul class="genre-list">
    <a [routerLink]="['bygenre', genre]" 
       *ngFor="let genre of genres"
       routerLinkActive
       #activeLink="routerLinkActive">
      <li>{{genre}}</li>
    </a>
  </ul>
</li>

组件类代码： #

import { Component, ViewChildren, QueryList } from '@angular/core';
import { RouterLinkActive } from '@angular/router';

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourComponent {
  @ViewChildren('activeLink') private activeLinks!: QueryList<RouterLinkActive>;

  hasActiveChildLink(): boolean {
    // 检查是否有任何一个子链接处于激活状态
    return this.activeLinks.some(link => link.isActive);
  }
}

解释：给每个带routerLink的<a>标签加上routerLinkActive指令，并绑定一个模板变量#activeLink。然后在组件里用@ViewChildren获取所有这些激活状态的实例，最后通过some方法判断是否有激活的链接，返回布尔值来控制父元素的样式。

方案二：自定义路由匹配器（最简洁的模板方案） #

如果你不想写组件类代码，可以直接在父元素上使用routerLinkActive，并自定义匹配规则来判断当前路由是否属于目标子路由。

模板代码： #

<li class="category-container main-menu-link" 
    routerLinkActive="your-active-class"
    [routerLinkActiveOptions]="{
      matcher: (urlTree) => urlTree.toString().includes('/bygenre')
    }">
  <div class="category">
    <i class="category-icon fa fa-film"></i>
  </div>
  <ul class="genre-list">
    <a [routerLink]="['bygenre', genre]" 
       *ngFor="let genre of genres">
      <li>{{genre}}</li>
    </a>
  </ul>
</li>

解释：通过routerLinkActiveOptions的matcher函数，我们可以自定义路由匹配逻辑——只要当前URL包含/bygenre（也就是你的子路由前缀），就给父元素加上your-active-class样式。这个方案完全不需要组件类的额外代码，非常简洁。

方案三：通过Router服务监听路由变化 #

如果需要更复杂的路由判断逻辑，可以直接注入Router服务，订阅路由事件来手动判断激活状态。

组件类代码： #

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  // 你的组件元数据
})
export class YourComponent implements OnInit {
  isGenreRouteActive = false;

  constructor(private router: Router) {}

  ngOnInit() {
    this.router.events.pipe(
      // 只监听路由导航完成的事件
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      // 判断当前URL是否包含目标子路由路径
      this.isGenreRouteActive = this.router.url.includes('/bygenre');
    });
  }
}

模板代码： #

<li class="category-container main-menu-link" 
    [ngClass]="{'your-active-class': isGenreRouteActive}">
  <div class="category">
    <i class="category-icon fa fa-film"></i>
  </div>
  <ul class="genre-list">
    <a [routerLink]="['bygenre', genre]" 
       *ngFor="let genre of genres">
      <li>{{genre}}</li>
    </a>
  </ul>
</li>

解释：通过订阅router.events，我们在每次路由导航完成后检查当前URL是否包含/bygenre，然后更新isGenreRouteActive变量，以此控制父元素的样式。这个方案适合需要更复杂判断逻辑的场景。

记得把上面代码里的your-active-class替换成你实际需要的激活样式类名哦！

内容的提问来源于stack exchange，提问作者Саске