Angular路由中如何获取含特殊字符的参数？

架构老林

2026-7-19

解决Angular路由含特殊字符的参数捕获问题

问题根源

手动拼接原生href时，特殊字符（如?、空格、括号）未做URL编码，导致?被解析为查询参数起始符，后续参数内容丢失
默认路由参数匹配规则会在遇到?、#这类分隔符时自动截断参数

解决方案

1. 改用Angular `routerLink`生成链接（替代原生`href`）

不要手动拼接URL，利用routerLink指令自动处理参数编码，确保特殊字符完整传递：

<div *ngFor="let el of mapElement['fileItems']| filter:term">
    <a [routerLink]="['/file-view', el['fileName']]">
       <p>{{el['fileName'] }} ({{el['number']}})</p>
    </a>
</div>

2. 修改路由配置，支持匹配含特殊字符的参数

默认的:file_name匹配规则会在特殊分隔符处截断参数，需自定义路由匹配器，让参数能包含任意字符直到路由路径结束：

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

// 自定义匹配器：捕获file-view/后的所有内容作为file_name参数
const fileViewMatcher = (url: UrlSegment[]): UrlMatchResult | null => {
  if (url.length === 1 && url[0].path.startsWith('file-view/')) {
    const fullParam = url[0].path.substring('file-view/'.length);
    return {
      consumed: url,
      posParams: {
        file_name: new UrlSegment(decodeURIComponent(fullParam), {})
      }
    };
  }
  return null;
};

const routes: Routes = [
  { 
    matcher: fileViewMatcher, 
    component: FileViewComponent 
  },
];

3. 正确获取并处理参数

若使用自定义匹配器，参数已自动解码，可直接获取：

ngOnInit(): void {
    this.fileName = this.route.snapshot.paramMap.get('file_name');
}

若保留默认路由配置（配合routerLink编码），则需手动解码：

ngOnInit(): void {
    const encodedFileName = this.route.snapshot.paramMap.get('file_name');
    this.fileName = encodedFileName ? decodeURIComponent(encodedFileName) : '';
}