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或浏览器有关。当我的网址为(时，刷新F5无效，因为Angular Router报告了这样的问题：

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

从URL地址栏中复制链接也是无用的，因为这种行为复制的链接包含(字符（不是%28）。如何防止%28和其他特殊字符不被浏览器在URL地址栏中解码？该问题出现在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
    }
  })
}

编辑，矩阵表示法：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 }]);
}

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

1 个答案: