Angular Router如何处理含斜杠/的路由参数？

我来帮你搞定这个路由匹配的问题～你遇到的核心问题是Angular默认的路由会把斜杠/当成路由段的分隔符，所以带斜杠的参数会被拆成多个路由段，导致无法匹配到preview/:Id这条路由。之前尝试的正则写法不对，因为Angular路由参数的正则只能匹配单个路由段（也就是不含斜杠的内容），所以得换个思路。

下面给你两种可行的解决方案，推荐第一种彻底解决：

方案一：使用自定义路由匹配器（最推荐） #

这种方法可以完全自定义路由的匹配规则，把preview/后面的所有内容（包括任意数量的斜杠）都捕获成Id参数。

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

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

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

function previewRouteMatcher(url: UrlSegment[]) {
  // 检查第一个路由段是否是'preview'
  if (url.length > 0 && url[0].path === 'preview') {
    // 把从第二个段开始的所有路径拼接成完整的Id参数（包括斜杠）
    const fullId = url.slice(1).map(segment => segment.path).join('/');
    return {
      consumed: url, // 标记所有路由段都被匹配消耗
      posParams: {
        Id: new UrlSegment(fullId, {}) // 把拼接后的内容作为Id参数
      }
    };
  }
  return null; // 不匹配时返回null
}

2. 修改路由配置 #

把原来的path配置替换成matcher：

const routes: Routes = [
  // 其他路由...
  {
    matcher: previewRouteMatcher,
    loadChildren: () => import('./path/preview/preview.module').then(m => m.PreviewModule)
  }
];

这样不管你的Id参数里有多少斜杠、加号或者其他特殊字符，都会被完整捕获到。在Preview模块的组件里，你还是可以像原来一样通过ActivatedRoute获取参数：

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    const id = params.get('Id');
    // 这里的id就是完整的带斜杠的参数啦
  });
}

方案二：参数编码和解码（适合快速临时解决） #

如果不想修改路由配置，也可以在跳转路由时对参数进行编码，获取时再解码，但这种方法的缺点是地址栏会显示编码后的字符（比如斜杠变成%2F），而且用户手动输入未编码的参数时还是会匹配失败。

1. 跳转时编码参数 #

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

constructor(private router: Router) {}

// 比如你的原始Id是"QQZnNw+VjBg/cAXvy6nxdiQ=="
navigateToPreview() {
  const rawId = 'QQZnNw+VjBg/cAXvy6nxdiQ==';
  const encodedId = encodeURIComponent(rawId);
  this.router.navigate(['/preview', encodedId]);
}

2. 获取参数时解码 #

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    const encodedId = params.get('Id');
    if (encodedId) {
      const rawId = decodeURIComponent(encodedId);
      // 使用解码后的原始Id
    }
  });
}

为什么之前的正则写法没用？ #

Angular路由里的参数正则（比如:Id(regex)）只能匹配单个路由段，也就是被斜杠分隔的部分，所以即使你写了匹配任意非空白字符的正则，也只能匹配到第一个斜杠之前的内容，后面的部分会被当成新的路由段，自然匹配失败。所以这种场景下必须用自定义匹配器才能解决。

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