使用 Angular 2 Router 对 url 进行自定义编码(使用 + 号代替空格) [英] Custom encoding for urls using Angular 2 Router (using a + sign in place of a space)

问题描述

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

I am using an Angular 2 Router to update the query params in a URL for a search application. I am attempting to replace spaces in a query with + signs. However, + signs are getting encoded. For example:

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

用?q=one%2Btwo"填充 URL.

populates the URL with "?q=one%2Btwo".

在查看 Angular 2 的源代码时，路由器似乎将 URL 转换为 UrlTree 它使用 encodeURIComponent() 对 url 进行编码.因此，无法阻止默认编码.

In looking at the source code for Angular 2, it looks like the router converts the URL to a UrlTree which uses encodeURIComponent() to encode the url. Because of this, it is impossible to prevent the default encoding.

我目前的流程是通过执行如上所示的navigateByUrl来更改路线，然后使用以下方法监听更改:

My current process is that I change the route by doing navigateByUrl as seen above, and then listen for changes with:

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

是否有另一种处理查询参数的方法可以让我使用自己的 url 编码策略?

Is there an alternate way to deal with query parameters that would allow me to use my own strategy for url encoding?

推荐答案

我找到了解决问题的方法.您可以通过实现 UrlSerializer 类.

I was able to find a solution to my problem. You can make own custom url serializer by implementing the UrlSerializer class.

自定义网址序列化程序

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

Create a custom url serializer like this:

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

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

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

Then, you just need to provide the CustomUrlSerializer in place of the UrlSerializer, which you can place in the AppModule providers array after importing both serializers.

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

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

Now, when you call router.navigate or router.navigateByUrl, it will use your custom serializer for parsing and serializing.

使用 + 符号作为空格

将 + 符号解析为空格:

To parse + signs as spaces:

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

这篇关于使用 Angular 2 Router 对 url 进行自定义编码(使用 + 号代替空格)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！