使用Angular 2路由器的网址自定义编码(使用+符号代替空格)

Question

我正在使用Angular 2路由器更新搜索应用程序的URL中的查询参数.我试图用+符号替换查询中的空格.但是,+符号正在编码.例如:

this.router.navigatebyUrl('?q=one+two');

使用"？q = 1%2Btwo"填充URL.

在查看Angular 2的源代码时,看起来路由器将URL转换为UrlTree ,它使用encodeURIComponent()对url进行编码.因此,不可能阻止默认编码.

我目前的过程是通过如上所示执行navigateByUrl来更改路径,然后通过以下方式侦听更改:

this.routeSubscription = this.route.queryParams.subscribe((params: any) => {
  this.term = (params.q ? params.q : '');
});

是否有另一种方法来处理查询参数,这些参数允许我使用自己的策略进行网址编码？

Answer 1

我能够找到解决问题的方法.您可以通过实现UrlSerializer类来创建自己的自定义URL序列化程序.

自定义URL序列化程序

像这样创建一个自定义url序列化程序:

class CustomUrlSerializer implements UrlSerializer {
    parse(url: string): UrlTree {
        // Custom code here
    }

    serialize(tree: UrlTree): string {
        // Custom code here
    }
}

然后,您只需要提供CustomUrlSerializer来代替UrlSerializer,您可以在导入两个序列化程序后将其放置在AppModule提供程序数组中.

providers: [
    { provide: UrlSerializer, useClass: CustomUrlSerializer },
    ...
]

现在,当您调用router.navigate或router.navigateByUrl时,它将使用您的自定义序列化程序进行解析和序列化.

使用+符号作为空格

要将+符号解析为空格:

parse(url: string): UrlTree {
    // Change plus signs to encoded spaces
    url = url.replace(/\+/g, '%20');
    // Use the default serializer that you can import to just do the 
    // default parsing now that you have fixed the url.
    return this.defaultUrlSerializer.parse(url)  
}

并序列化:

serialize(tree: UrlTree): string {
    // Use the default serializer to create a url and replace any spaces with + signs
    return this.defaultSerializer.serialize(tree).replace(/%20/g, '+');
}

DefaultUrlSerializer

Answer 2

我遇到了指定自定义提供程序的问题。使用--prod标志进行编译时显然存在循环依赖，导致文本错误：useClass cannot by null.这就是我解决该错误的方法：

在 AppModule 中，定义以下内容：

const customUrlSerializer = new CustomUrlSerializer();
const CustomUrlSerializerProvider = {
    provide: UrlSerializer,
    useValue: customUrlSerializer
};

然后在提供者数组中，添加您在上面指定的提供者。

...
providers: [CustomUrlSerializerProvider]
...