Angular5：正则路由参数配置，同路由绑定不同组件问题

嘿，我明白你要实现的需求：让domain/student/books-offers这类以-offers结尾的路径匹配优惠组件，domain/student/exam1这类普通动态参数路径匹配考试组件。你之前尝试的path: 'student/:id["-offers"]'写法不符合Angular路由的参数匹配规则，所以没生效。这里给你两种靠谱的解决方案：

方案一：自定义UrlMatcher（推荐，灵活可控） #

Angular的UrlMatcher允许我们编写自定义的路由匹配逻辑，完全满足这种精准区分的需求。我们可以写一个专门匹配-offers结尾路径的matcher，再配合普通动态路由即可。

1. 定义自定义匹配函数 #

在你的路由配置文件（比如app-routing.module.ts）里，先定义这个匹配函数：

import { UrlMatcher, UrlSegment, UrlSegmentGroup, Route } from '@angular/router';

// 匹配以-offers结尾的student子路径
export function offersMatcher(url: UrlSegment[], group: UrlSegmentGroup, route: Route): any {
  // 检查路径是否是两段：student + xxx-offers
  if (url.length === 2 && url[0].path === 'student') {
    const paramSegment = url[1].path;
    // 判断当前参数段是否以-offers结尾
    if (paramSegment.endsWith('-offers')) {
      // 可选：提取去掉-offers后的内容作为参数值（比如books-offers -> books）
      const cleanId = paramSegment.slice(0, -7); // "-offers"共7个字符
      return {
        consumed: url, // 标记已匹配所有路径段
        posParams: { id: new UrlSegment(cleanId, {}) } // 传递处理后的参数
      };
    }
  }
  return null; // 不匹配时返回null，让后续路由继续匹配
}

2. 配置路由 #

把自定义匹配的路由放在最前面（因为Angular路由是从上到下顺序匹配的，优先匹配精准规则），再放普通动态路由：

const routes: Routes = [
  // 优先匹配以-offers结尾的路径
  {
    matcher: offersMatcher,
    loadChildren: () => import('./student-offers/student-offers.module').then(m => m.StudentOffersModule)
  },
  // 匹配所有其他student/:id的路径
  {
    path: 'student/:id',
    loadChildren: () => import('./student-exam/student-exam.module').then(m => m.StudentExamModule)
  }
];

这样配置后，student/books-offers会被第一个路由匹配，加载优惠组件；student/exam1会跳过第一个路由，匹配第二个普通路由。

方案二：利用Angular路由的参数正则匹配 #

如果你不想写自定义函数，也可以用Angular路由内置的参数正则匹配功能，不过要注意正确的写法：

const routes: Routes = [
  // 匹配参数以-offers结尾的路径，正则表示参数是任意字符+'-offers'
  {
    path: 'student/:id(.+?-offers)',
    loadChildren: () => import('./student-offers/student-offers.module').then(m => m.StudentOffersModule)
  },
  // 普通动态参数路由
  {
    path: 'student/:id',
    loadChildren: () => import('./student-exam/student-exam.module').then(m => m.StudentExamModule)
  }
];

这种方法的缺点是：参数id会包含完整的xxx-offers字符串，如果你的组件需要的是去掉-offers的部分，还得自己在组件里处理；而自定义matcher可以直接返回处理后的参数，更省心。

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