使用Angular 2 Router的URL的自定义编码(使用+号代替空格)

诺亚·摩芬格(Noah Mulfinger)

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

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

用“?q = one%2Btwo”填充URL。

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

我当前的过程是,通过执行上图所示的navigationByUrl来更改路线,然后使用以下命令监听更改:

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

有没有其他方法可以处理查询参数,使我可以使用自己的网址编码策略?

诺亚·摩芬格(Noah Mulfinger)

我能够找到解决问题的方法。您可以通过实现UrlSerializer来制作自己的自定义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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Python如何使用自定义编码实现排序?

使用logback使用自定义编码器限制消息大小

如何使用Circe创建选项类型的自定义编码?

使用NSData自定义编码,初始化但崩溃

使用自定义编码器实例化kafka生产者时,无法实例化

如何在Spark 2.X数据集中创建自定义编码器?

Angular 2 DI,使用自定义Http

在自定义 RadioButton 中使用 BehaviorSubject 的 Angular 2

如何将自定义编码文件转换为UTF-8(使用Java或使用专用工具)

载波:使用空格代替下划线

如何使用SUBSTITUTE代替撇号?

如何使用 Python 解码 Angular 的自定义 HTML 编码

Angular 2-NgFor使用数字代替集合

如何使用tf2为seq2seq构建自定义双向编码器?

如何降级用angular2编写的自定义管道以在angular 1.5中使用?

Angular 2-如果使用自定义验证,为什么需要使用ngForm?

使用自定义ngDoBootstrap和createCustomElement时,Angular Router会忽略URL

如何使用自定义颜色代替预定义的颜色

在 Angular 2 中为每个用户自定义 URL

如何使用Struts2创建自定义URL,如www.twitter.com/goodyzain

使用tidyverse语言添加列,但使用列号代替列名

如何在 angular 2 中使用自定义 http 刷新访问令牌?

在Angular 2(RC5)中使用多个自定义模块

Angular 2 使用动态 <ng-content> 自定义自动完成的显示

将自定义组件与Angular2结合使用时,JQueryUI Sortable不起作用

如何通过ng2-charts angular使用chartJs的自定义渲染方法?

Angular2:在组件视图中通过ngIf使用自定义时间

Angular2 FormBuilder:在自定义验证器中使用“ this”

Angular2在自定义管道中使用基本管道

TOP 榜单

热门标签

归档