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，这就是我最初发布的问题的解决方法。

新建class如下：

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, ')');
   }
 }

在“app.modules.ts”（或任何您的模块文件）中将以下内容添加到提供程序：
```
 providers: [MyOtherServices,  { provide: UrlSerializer, useClass: CustomUrlSerializer }],
```
更多...

祝你好运

Angular 带括号的查询参数？

Angular query param with parenthesis?

parameters

url

routes

angular