带括号的Angular查询参数?

Question

我有一个简单的Angular应用，它使用了一个来自路由器的查询参数，如下所示:

const routes: Routes = [{
path: '',
component: DefaultComponent
},
{
path: ':uname',
component: ProductDisplayComponent
}];

这很好，我可以访问'product' "uname"如下:

let prodId = params.get('uname')

问题是一些"uname"值是数字，有些是带括号的数字，例如"567(B)">

如果"uname"只是一个数字，但是一旦括号在uname中，应用程序就会重定向到"/"

是否有办法获取值当"unmae"括号吗?

谢谢你,

Answer 1

因为括号有特殊的含义，所以我做了一些额外的处理，但我将给你一个小例子，希望你能理解

{
path: 'd', component: DComponent,
children:[
{path: 'c', component: CComponent},
{path: 'a', component: AComponent,outlet:'right'},
]
},
this.router.navigateByUrl('/home/d/(c//right:a)')

主要用作次路由出口

Answer 2

基于以下报告:github.com/angular/angular/issues/10280，这就是我如何解决我的问题，如最初发布的

1. 按如下方式创建新类:

   import { UrlSerializer, UrlTree, UrlSegment, DefaultUrlSerializer } from '@angular/router';
   export class CustomUrlSerializer implements UrlSerializer {
   private dus = new DefaultUrlSerializer();
   parse(url: any): UrlTree {
   url = url.replace(/(/g, '%28').replace(/)/g, '%29');
   return this.dus.parse(url)
   }
   serialize(tree: UrlTree): any {
   return this.dus.serialize(tree).replace(/%28/g, '(').replace(/%29/g, ')');
   }
   }
   

2. 在"app.modules.ts"(或者无论你的模块文件是什么)在providers中添加以下内容:

   providers: [MyOtherServices,  { provide: UrlSerializer, useClass: CustomUrlSerializer }],
   

   更多…

好运