时间戳

首页 > 解决方案 > Angular Router URL 编码特殊字符和浏览器行为

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

问题描述

我只是无法弄清楚此类问题的解决方案。我正在设计搜索引擎，我想在 url 中显示用户试图找到的内容，如下所示：

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

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

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

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）。如何防止%28url地址栏中的其他特殊字符不被浏览器解码？问题出现在 Angular v5.2.5

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

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

标签： angulartypescriptangular-routingangular-router

解决方案

它不起作用，因为您没有查看正确的参数。如您所见，在这个 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 }]);
}

推荐阅读