Angular 17配置带常量前缀与参数的路由失败，求解决方案

Angular 默认不支持将固定字符串与路由参数直接拼接在同一个路由段（比如hotel-:code）的写法，因为它的路由匹配规则是按/分割的路径段来处理，每个段要么是纯固定字符串，要么是纯参数（以:开头），混合写法会被识别为完整的固定段名，导致无法匹配hotel-123这类路径。

可行解决方案：使用自定义路由匹配器（Custom Matcher） #

这是最精准的解决方案，通过自定义匹配逻辑来解析hotel-xxx格式的路径，提取出code参数。

1. 修改app.routes.ts配置

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

// 自定义路由匹配器函数
function hotelCodeMatcher(url: UrlSegment[]): UrlMatchResult | null {
  // 只匹配单个路径段的情况（比如hotel-123）
  if (url.length === 1) {
    const segment = url[0];
    // 用正则匹配以hotel-开头的路径，捕获后面的code部分
    const match = segment.path.match(/^hotel-(.+)$/);
    if (match) {
      return {
        consumed: url, // 标记当前路径段已被匹配
        posParams: {
          // 将捕获到的内容作为code参数
          code: new UrlSegment(match[1], {})
        }
      };
    }
  }
  return null; // 不匹配时返回null
}

export const routes: Routes = [
  {
    // 替换path为自定义matcher
    matcher: hotelCodeMatcher,
    loadComponent: () => import('../pages/hotel/hotel.component').then(m => m.HotelComponent)
  }
];

2. 在组件中获取code参数

和普通路由参数的获取方式完全一致，通过ActivatedRoute读取：

import { ActivatedRoute } from '@angular/router';
import { OnInit } from '@angular/core';

export class HotelComponent implements OnInit {
  code: string | null = null;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 读取快照中的参数
    this.code = this.route.snapshot.paramMap.get('code');
    
    // 如果需要监听参数变化（比如同组件内路由更新），可以订阅paramMap
    this.route.paramMap.subscribe(params => {
      this.code = params.get('code');
    });
  }
}

备选方案：通配符路由+组件内解析 #

如果不想用自定义匹配器，也可以用通配符路由匹配所有以hotel-开头的路径，再在组件内解析参数，但这种方式匹配范围更宽，可能会包含不符合预期的路径：

// app.routes.ts
export const routes: Routes = [
  {
    path: 'hotel-*',
    loadComponent: () => import('../pages/hotel/hotel.component').then(m => m.HotelComponent)
  }
];

在组件内解析：

// hotel.component.ts
import { ActivatedRoute } from '@angular/router';

ngOnInit(): void {
  this.route.url.subscribe(urlSegments => {
    const fullPath = urlSegments[0].path;
    // 截取hotel-后面的部分作为code
    this.code = fullPath.replace('hotel-', '');
  });
}

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