如何在Angular运行时判断router是否已注册指定路由

针对微前端迁移场景下的路由判断需求，可直接通过Angular原生Router能力实现，具体方案如下：

核心原理 #

Angular Router内置的recognize方法可异步检测给定URL是否匹配已注册的路由规则，包括懒加载的MFE模块路由：如果匹配到有效路由会返回UrlTree对象，匹配失败则返回null，完全适配逐个加载MFE的场景。 #

实现步骤 #

1. 封装路由有效性判断逻辑 #

优先封装通用判断方法，后续可复用在自定义组件、指令中：

import { Router, Location } from '@angular/router';
import { firstValueFrom } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class RouteJudgeService {
  constructor(
    private router: Router,
    private location: Location
  ) {}

  async isAngularRoute(url: string): Promise<boolean> {
    // 先规范化路径，处理相对路径、多余斜杠等问题
    const normalizedUrl = this.location.normalize(url);
    try {
      // recognize会自动触发懒加载模块加载后再做路由匹配
      const urlTree = await firstValueFrom(this.router.recognize(normalizedUrl));
      return !!urlTree;
    } catch (err) {
      // 匹配出错直接判定为非Angular路由，走原生href
      return false;
    }
  }
}

2. 封装通用链接组件，统一逻辑 #

避免每个链接单独写判断，直接封装一个可全局使用的链接组件，自动决策用routerLink还是原生href：

// app-link.component.ts
@Component({
  selector: 'app-link',
  template: `
    <ng-container *ngIf="routeValidated">
      <a 
        *ngIf="isAngularRoute; else hrefTemplate"
        [routerLink]="linkUrl"
        [queryParams]="queryParams"
        [fragment]="fragment"
        [target]="target"
      >
        <ng-content></ng-content>
      </a>
      <ng-template #hrefTemplate>
        <a [href]="fullHref" [target]="target">
          <ng-content></ng-content>
        </a>
      </ng-template>
    </ng-container>
  `
})
export class AppLinkComponent implements OnInit {
  @Input() linkUrl: string;
  @Input() queryParams?: Record<string, any>;
  @Input() fragment?: string;
  @Input() target?: string = '_self';
  
  isAngularRoute = false;
  routeValidated = false;
  fullHref = '';

  constructor(private routeJudgeService: RouteJudgeService) {}

  async ngOnInit() {
    // 可选优化：先做前缀过滤，比如只有apps/开头的路径才做路由判断，其他直接走href
    if (!this.linkUrl.startsWith('apps/')) {
      this.isAngularRoute = false;
      this.buildFullHref();
      this.routeValidated = true;
      return;
    }

    this.isAngularRoute = await this.routeJudgeService.isAngularRoute(this.linkUrl);
    this.buildFullHref();
    this.routeValidated = true;

    // 可选优化：加本地缓存，已经判断过的路径下次直接取缓存结果，减少重复判断
  }

  private buildFullHref() {
    if (this.isAngularRoute) return;
    // 拼接查询参数和锚点生成完整href
    let paramsStr = this.queryParams ? `?${new URLSearchParams(this.queryParams).toString()}` : '';
    let fragmentStr = this.fragment ? `#${this.fragment}` : '';
    this.fullHref = `${this.linkUrl}${paramsStr}${fragmentStr}`;
  }
}

3. 业务侧使用 #

直接替换原有<a>标签即可，无需额外修改逻辑：

<!-- 原写法 -->
<a href="/apps/admin">管理后台</a>
<!-- 新写法 -->
<app-link linkUrl="/apps/admin">管理后台</app-link>

边界情况说明 #

• 如果路由配置了返回false的守卫，recognize会返回null，这种场景下会自动走原生href，符合预期
• 如果需要忽略守卫的影响，也可以选择递归遍历this.router.config所有路由节点（包括子路由、已加载的懒加载路由）做同步判断，性能更高但无法适配未加载的MFE路由
• 可以根据业务场景调整前缀过滤规则，进一步提升判断效率

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