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

Question

我只是想不出解决此类问题的方法。我正在设计搜索引擎，我想在 url 中显示用户试图找到的内容：

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

用户正在尝试查找(rockstar 短语。

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

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

所以%28 更改为(。我不知道这种行为是否依赖于 Angular 或浏览器。当我有 ( 的 url 时，刷新 F5 不起作用，因为 Angular 路由器报告这样的问题：

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

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

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

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

Answer 1

它不起作用，因为您没有查看正确的参数。如您所见，在this stackblitz 中，您甚至不需要对参数进行编码。

您也无需费力地创建查询参数。 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 使用矩阵表示法：stackblitz

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 }]);
}