Angular 2中如何移除面包屑中的%20空格符

嘿，我来帮你搞定这个面包屑里的%20问题！你现在的核心需求是把动态路由参数里的URL编码空格转成正常空格，同时保证末尾的'Products'正确显示对吧？

首先，你之前用的breadcrumbService.addFriendlyNameForRouteRegex方法其实只是给整个路由段绑定了固定名称，没处理动态参数里的编码内容。要解决这个，得拿到动态参数并解码，再生成面包屑的友好名称。

假设你的路由结构里，那个动态值对应的参数名是productName（比如路由路径是/app/new/:productName/products），可以试试下面的代码：

// 利用带回调的方法处理动态参数
breadcrumbService.addFriendlyNameForRoute('/app/new/:productName/products', (route) => {
  // 解码URL参数里的%20为普通空格
  const decodedProductName = decodeURIComponent(route.params.productName);
  // 返回拼接好的面包屑文本，确保末尾是Products
  return `${decodedProductName} > Products`;
});

如果你的项目是通过路由配置的data.breadcrumb来定义面包屑，也可以用这种回调方式：

const routes: Routes = [
  {
    path: 'app/new/:productName/products',
    component: YourProductsComponent,
    data: {
      breadcrumb: (route: ActivatedRouteSnapshot) => {
        const productName = route.paramMap.get('productName')!;
        const decodedName = decodeURIComponent(productName);
        return `${decodedName} > Products`;
      }
    }
  }
];

原理很简单：decodeURIComponent()会把URL里的编码字符（比如%20）转成对应的原始字符，这样Microsoft%20D365就会变成Microsoft D365。然后我们把解码后的参数和Products拼接，就能得到你想要的面包屑格式了。

最后检查一下：确保路由参数的名称和你实际项目里的一致，比如如果参数不是productName，记得改成你路由里定义的参数名哦！

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