angular 2 禁用 url 编码 [英] angular 2 disable url encoding

问题描述

我想禁用网址编码.

当我在下面使用它时.

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

网址是这样的

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

我希望它像下面一样

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

有没有办法禁用url编码?

Is there a way to disable the url encoding?

推荐答案

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

Angular2 by default uses encodeURIComponent() to encode queryParams in URL, you can avoid it by writing custom URL serializer and override default functionality.

就我而言，我想避免使用 Angular2 以避免用 (%2) 替换逗号 (,).我将 Query 作为 lang=en-us,en-uk 传递，在那里它被转换为 lang=en-us%2en-uk.

In my case, I wanted to avoid Angular2 to avoid replacing comma(,) by (%2). I was passing Query as lang=en-us,en-uk where it was getting converted to 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

Add below line to your main appModule.ts

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

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

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

This won't break your default functionality and take cares of URL as per your need.

这篇关于angular 2 禁用 url 编码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！