angular 2 禁用 url 编码答案

【问题标题】：angular 2 disable url encodingangular 2 禁用 url 编码
【发布时间】：2017-01-05 01:57:33
【问题描述】：

我想禁用 url 编码。

当我在下面使用这个时。

this.router.navigate(['/profile', { tags: 'one,two' }]);

网址是这样的

http://localhost:4200/profile;tags=one%2Ctwo

我希望它像下面这样漂亮

http://localhost:4200/profile;tags=one,two

有没有办法禁用url编码？

【问题讨论】：

查看stackoverflow.com/questions/22944932/…
@Deep，您的链接是针对角度 1 的，这有点不同。
在某些（简单）情况下，您可以自己序列化 this.router.navigateByUrl('/profile;tags=one,two')，这将在您传递 URL 时留下...这似乎对我有用。

标签： javascript http angular angular2-routing

【解决方案1】：

Angular2 默认使用 encodeURIComponent() 对 URL 中的 queryParams 进行编码，您可以通过编写自定义 URL 序列化程序并覆盖默认功能来避免它。

就我而言，我想避免使用 Angular2 来避免用 (%2) 替换逗号(,)。我将查询作为 lang=en-us,en-uk 传递，它被转换为 lang=en-us%2en-uk。

我是这样解决的：

CustomUrlSerializer.ts

import {UrlSerializer, UrlTree, DefaultUrlSerializer} from '@angular/router';

export class CustomUrlSerializer implements UrlSerializer {
    parse(url: any): UrlTree {
        let dus = new DefaultUrlSerializer();
        return dus.parse(url);
    }

    serialize(tree: UrlTree): any {
        let dus = new DefaultUrlSerializer(),
            path = dus.serialize(tree);
        // use your regex to replace as per your requirement.
        return path.replace(/%2/g,',');
    }
}

以下行添加到您的主 appModule.ts

import {UrlSerializer} from '@angular/router';
import {CustomUrlSerializer} from './CustomUrlSerializer';

@NgModule({
    providers: [{ provide: UrlSerializer, useClass: CustomUrlSerializer }]
})

这不会破坏您的默认功能并根据您的需要处理 URL。

【讨论】：

不是在这两种方法中调用 DefautlUrlSerializer ，而是扩展 DefautlUrlSerializer 工作吗？我觉得这将是一种更清洁、更简单的方法。
@EnzamHossain 是的，我们可以通过创建单个实例并在其中使用它来采用更简洁的方法。
嗨@jigargala 当我们在模块@NgModule({ providers: [{ provide: UrlSerializer, useClass: CustomUrlSerializer }] }) 中使用它时，这将覆盖路由器中的defaultUrlSerializer 对吗？如果我错了，请纠正我。
@jigargala 我已经使用 CustomUrlSerializer 像这样在 url 中用 + 替换空格，但是当我在 IIS 中上传我的 Angular 应用程序时，页面刷新时出现 404 错误，在 localhost 中它工作正常。这是仅当 url 中有空间时才会发生。您能提供任何解决方案吗？

【解决方案2】：

网址如下所示：

http://localhost:4200/profile;tags=one%2Ctwo

但你食用它不会带来任何问题。如果你为 'profile' 路由设置一个 'canActive' 守卫，代码如下：

  canActivate(route: ActivatedRouteSnapshot) {
    console.log(route.params);}

当您导航到http://localhost:4200/profile;tags=one%2Ctwo 时，您将在控制台中看到{tag: one, two}。因此，当您食用它时，它是“一，二”。当然，你也可以复制这个编码后的 url 发送给其他人使用。

【讨论】：

嗨，我很欣赏它的功能没有任何问题，我试图找到一种解决方案，使 url 漂亮或吸引人阅读。