Angular中如何为路由参数指定整数类型以避免路由错误匹配

问题原因 #

你遇到的问题由两个因素共同导致：

• Angular路由默认按定义顺序从上到下匹配，优先返回第一个命中的规则，你把动态路由products/:id放在了静态路由products/new之前，访问/products/new时会优先命中动态路由，将new识别为id参数的值
• 默认路由没有对id参数添加格式校验，任意字符串都会被当做合法的id值

解决方法 #

方法1：调整路由顺序（最简修复方案）

把静态路由放在同前缀动态路由的前面即可，这也是Angular路由的官方推荐实践，无需额外代码就能解决90%的同类路由匹配问题，修改后配置如下：

const routes: Route[] = [
  {path: '', component: AdminProductsComponent, pathMatch: 'full'},
  {path: 'products', component: AdminProductsComponent, pathMatch: 'full'},
  // 静态路由放在同前缀动态路由之前
  { path: 'products/new', component: NewProductComponent },
  { path: "products/:id", component: AdminProductDetailsComponent },
  { path: "products/:id/edit", component: EditProductComponent },
  { path: "orders", component: AdminOrdersComponent },
  { path: "orders/:id", component: AdminOrderDetailsComponent },
];

方法2：自定义路由匹配器（严格限制id为整数）

如果需要从路由匹配层面强制要求id必须为正整数，即使后续路由顺序被打乱也不会出错，可以使用自定义路由匹配器实现：

1. 先定义数字参数匹配函数

import { UrlSegment, UrlMatchResult } from '@angular/router';

// 匹配 products/数字 格式的路径
function integerIdMatcher(url: UrlSegment[]): UrlMatchResult | null {
  if (url.length === 2 && url[0].path === 'products' && /^\d+$/.test(url[1].path)) {
    return {
      consumed: url,
      posParams: {
        id: url[1]
      }
    };
  }
  return null;
}

2. 修改路由配置，替换原动态路由规则

const routes: Route[] = [
  {path: '', component: AdminProductsComponent, pathMatch: 'full'},
  {path: 'products', component: AdminProductsComponent, pathMatch: 'full'},
  { path: 'products/new', component: NewProductComponent },
  // 用自定义匹配器替换原products/:id规则
  { matcher: integerIdMatcher, component: AdminProductDetailsComponent },
  { path: "products/:id/edit", component: EditProductComponent },
  { path: "orders", component: AdminOrdersComponent },
  { path: "orders/:id", component: AdminOrderDetailsComponent },
];

配置完成后，只有id为纯数字的路径才会命中AdminProductDetailsComponent，非数字路径会自动向下匹配其他规则。

方法3：路由守卫校验（可复用的参数校验方案）

如果需要给多个动态路由复用整数校验逻辑，可以用路由守卫实现：

1. 定义校验守卫

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, Router, UrlTree } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class IntegerIdGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot): boolean | UrlTree {
    const id = route.paramMap.get('id');
    // 校验id为正整数
    if (id && /^\d+$/.test(id)) {
      return true;
    }
    // 校验不通过跳404页，也可返回false直接阻止访问
    return this.router.parseUrl('/404');
  }
}

2. 给需要校验的路由添加守卫

const routes: Route[] = [
  {path: '', component: AdminProductsComponent, pathMatch: 'full'},
  {path: 'products', component: AdminProductsComponent, pathMatch: 'full'},
  { path: 'products/new', component: NewProductComponent },
  { path: "products/:id", component: AdminProductDetailsComponent, canActivate: [IntegerIdGuard] },
  { path: "products/:id/edit", component: EditProductComponent, canActivate: [IntegerIdGuard] },
  { path: "orders", component: AdminOrdersComponent },
  // 订单路由也可以复用同一个守卫
  { path: "orders/:id", component: AdminOrderDetailsComponent, canActivate: [IntegerIdGuard] },
];

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