如何在Angular中使用TypeScript判断路由链接是否激活

要实现和routerLink完全一致的路由匹配逻辑，无需使用routerLinkActive，可以通过Angular Router的createUrlTree和isActive方法完成，以下是具体实现方案：

核心实现思路 #

1. 用createUrlTree将传入的routerCmd（支持字符串/数组格式的路由路径）转换为UrlTree对象，确保解析逻辑和routerLink一致（尤其是相对路径）。
2. 通过router.isActive对比目标UrlTree与当前路由，支持精确/包含匹配；简单场景也可直接对比URL字符串。

修改后的组件代码 #

import { Component, Input, OnInit } from '@angular/core';
import { Router, ActivatedRoute, UrlTree, NavigationEnd } from '@angular/router';

@Component({
  selector: 'test-component',
  template: `<a [routerLink]="routerCmd">Link</a>`
})
class TestComponent implements OnInit {
  @Input() public routerCmd: string | any[];

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute
  ) {}

  ngOnInit(): void {
    // 监听路由变化，实时判断匹配状态
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        this.checkRouteMatch();
      }
    });

    // 初始化时执行一次判断
    this.checkRouteMatch();
  }

  private checkRouteMatch(): void {
    // 基于当前路由上下文解析目标路由为UrlTree
    const targetUrlTree: UrlTree = this.router.createUrlTree(
      Array.isArray(this.routerCmd) ? this.routerCmd : [this.routerCmd],
      { relativeTo: this.activatedRoute }
    );

    // 1. 精确匹配判断（推荐，支持带参数的路由）
    const isExactMatch = this.router.isActive(targetUrlTree, { exact: true });
    // 2. 字符串匹配（适合无参数的简单路由）
    const isStringMatch = targetUrlTree.toString() === this.router.url;

    if (isExactMatch) {
      alert('路由精确匹配！');
    }
    if (isStringMatch) {
      alert('路由字符串匹配！');
    }
  }
}

关键细节说明 #

• relativeTo: this.activatedRoute：确保相对路径（如./tests）的解析和routerLink完全一致，以当前组件所在路由为基准。
• router.isActive的第二个参数：{ exact: true }表示必须完全匹配当前路由的所有层级；设为false时，目标路由是当前路由的父路由或自身都会返回true。
• 监听NavigationEnd事件：保证路由变化时能重新执行匹配判断，避免仅初始化时判断一次的局限性。

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