Angular 路由器无法识别路径中的 ()

Question

我正在尝试根据路由器路径中提供的相同参数加载 Angular 分量。我的路径看起来像这样。

  {
    path: ':code/:country',
    component: CardViewComponent,
    resolve: {
      configuration: CardViewService
    }
  },

首先，我懒惰地加载我的模块，并且在那个结节路由器中我试图加载上述组件。模块的延迟加载是

 {
    path: 'main/chapters',
    loadChildren: () => import('./features/chapter.module').then(m => m.ChapterModule),
  },

一切正常，但当 () 作为此路由的参数传入时，就会出现问题。 例如

/main/chapters/Au/Australia

会产生正确的输出，但是当它变得像这样时

/main/chapters/Au/Australia(Old)

组件未加载。但同样，如果去掉括号，那么一切都会正常。我已尝试 encodeUriComponent 但没有帮助。更改 url 对我来说不是一个选择。

任何人都可以指导我吗？我也搜索过github问题 https://github.com/angular/angular/issues/10280 但无法从中得到太多。真的很期待一些解决方案。

Answer 1

GitHub 链接中提供的解决方法确实有效。

encodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, function (c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

const url = `/main/chapters/Au/${this.encodeURIComponent('Australia(Old)')}`;
this.router.navigate(url);

Github Issue

Stackblitz