使用Angular 2中的导航避免URL编码

时间:2016-12-16 10:00:09

标签: angular navigateurl

如何避免使用URL Encoding navigate?目前,我正在如下导航网址,它将/的网址编码为%2F。我想避免它,所以无论如何都要这样做吗?

this.router.navigate(['/comp', { type: this.Type }]);

1 个答案:

答案 0 :(得分:0)

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

在我的情况下,我想避免Angular2避免用(%2)替换逗号(,)。我传递了Query作为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。