Angular 路由器 URL 编码特殊字符和浏览器行为

我只是想不出解决这个问题的办法。我正在设计搜索引擎，我想在 url 中显示用户试图查找的内容，如下所示：

https://my-site.com/search;query=%28rockstar;search=true;page=0

用户正在尝试寻找(rockstar phrase.

当我将此网址粘贴到浏览器时，它按预期工作，但 Chrome 浏览器显示此网址，如下所示：

https://my-site.com/search;query=(rockstar;search=true;page=0

So the %28更改为(。我不知道这种行为是否依赖于角度或浏览器。当我有网址时(然后清爽F5无法工作，因为 Angular Router 报告如下问题：

Cannot match any routes. URL Segment: 'rockstar;search=true;page=0'

从 url 地址栏复制链接也是无用的，因为复制的链接包含这种行为(字符（不%28）。如何预防%28以及其他无法被浏览器在网址地址栏中解码的特殊字符？问题出现在 Angular v5.2.5 中

这是这个问题的演示：https://angular-url-problem.stackblitz.io https://angular-url-problem.stackblitz.io

请注意，在 Angular 6 中，这个问题不存在：https://angular-url-problem-v6.stackblitz.io https://angular-url-problem-v6.stackblitz.io

它不起作用，因为您没有查看正确的参数。在这次堆栈闪电战 https://stackblitz.com/edit/angular-url-problem-v6-h6nlh5?file=src%2Fapp%2Fsearch%2Fsearch.component.ts，如您所见，您甚至不需要对参数进行编码。

您也不需要走得太远来创建查询参数。 Angular 提供了高水平的抽象，利用它来发挥你的优势。

ngOnInit(): void {
  this._route.queryParamMap
    .subscribe(params => {
      this.form.patchValue({
        query: params.get('query') || '',
      });
    });
}

public onSubmit(): void {
  const query: string = this.form.value.query;
  this._router.navigate(['/search'], {
    queryParams: {
      query
    }
  })
}

EDIT用矩阵表示法：堆栈闪电战 https://stackblitz.com/edit/angular-url-problem-v6-o3vskb?file=src/app/search/search.component.ts

ngOnInit(): void {
  this._route.params
    .subscribe(params => {
      this.form.patchValue({
        query: params['query'] || '',
      });
    });
}

public onSubmit(): void {
  const query: string = this.form.value.query;
  this._router.navigate(['/search', { query }]);
}