Angular中如何判断当前路由是否以指定路径（如/vehicle/edit/*）开头

方法1：直接使用字符串startsWith方法（最简单） #

修改app.component.html中的*ngIf条件，利用原生字符串方法匹配所有以/vehicle/edit/开头的路径：

<router-outlet>
  <app-spinner></app-spinner>
  <ngx-ui-loader *ngIf="!(currentRoute === '/dashboard' || currentRoute.startsWith('/vehicle/edit/'))"></ngx-ui-loader>
</router-outlet>

无需额外修改TS代码，就能覆盖所有带ID参数的车辆编辑页面路径。

方法2：用正则表达式封装判断逻辑（更灵活） #

将匹配逻辑移到TS文件中，通过正则实现精准匹配：

1. 在app.component.ts中添加判断方法：

shouldHideLoader(): boolean {
  // 匹配仪表盘路径，或所有/vehicle/edit/开头的路径
  return this.currentRoute === '/dashboard' || /^\/vehicle\/edit\/.*$/.test(this.currentRoute);
}

2. 修改app.component.html的*ngIf条件：

<router-outlet>
  <app-spinner></app-spinner>
  <ngx-ui-loader *ngIf="!shouldHideLoader()"></ngx-ui-loader>
</router-outlet>

正则表达式^\/vehicle\/edit\/.*$会严格匹配以/vehicle/edit/开头的任意路径，适合需要复杂匹配规则的场景。

方法3：利用Angular Router的路由匹配（更符合Angular规范） #

如果路由配置中已定义车辆编辑页的路由（比如path: 'vehicle/edit/:id/:subId'），可以通过Router API判断当前路由：

1. 在app.component.ts中注入Router并添加方法：

import { Router } from '@angular/router';

constructor(private router: Router) {}

shouldHideLoader(): boolean {
  // 精确匹配仪表盘
  const isDashboard = this.router.isActive('/dashboard', { exact: true });
  // 判断当前路由是否包含车辆编辑路径段
  const isVehicleEdit = this.router.url.includes('/vehicle/edit/');
  
  return isDashboard || isVehicleEdit;
}

2. 修改app.component.html的*ngIf条件：

<ngx-ui-loader *ngIf="!shouldHideLoader()"></ngx-ui-loader>

这种方式贴合Angular路由体系，避免直接操作字符串路径。

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