修改Angular的路由器导航方法的默认URL编码

Question

我需要navigate在路由器上调用方法时自定义URL的编码方式.

我知道我需要实现自己的版本UrlSerializer并编写自定义serialize方法.我的问题是,我希望改变的唯一方法是使用encode方法url_tree.

export function encode(s) {
    return encodeURIComponent(s);
}

https://github.com/angular/angular/blob/master/modules/@angular/router/src/url_tree.ts#L344

为了做到这一点,我需要将以下所有方法复制+粘贴url_tree到my中,CustomSerializer因为它们不会被导出:

serialize

serializeQueryParams

Pair

pairs

serializeSegment

encode

我看了这个答案,但它并没有完全解决我的问题,因为我想要除了encode方法之外的所有默认行为.

我在这里遗漏了什么或有更好的方法来解决这个问题吗？

Answer 1

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

在我的情况下,我想避免Angular2避免用(%2C)替换逗号(,).我正在传递Query为lang = en-us,en-uk,它被转换为lang = en-us%2Cen-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(/%2C/g,',');
      }
   }

将以下行添加到主appModule.ts

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

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

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