angular - 使用 Angular 2 路由器的 url 自定义编码(使用 + 号代替空格)

Question

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

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

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

在查看 Angular 2 的源代码时，路由器似乎将 URL 转换为 UrlTree which uses encodeURIComponent() to encode the url .因此，无法阻止默认编码。

我目前的流程是，我通过执行 navigateByUrl 更改路由，如上所示，然后监听更改:

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

有没有其他方法可以让我使用自己的 url 编码策略来处理查询参数？

Answer 1

我找到了解决问题的办法。您可以通过实现 UrlSerializer 来制作自己的自定义 url 序列化程序。类。

自定义 Url 序列化程序

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

@Injectable()
export class CustomUrlSerializer implements UrlSerializer {

    constructor(private defaultUrlSerializer: DefaultUrlSerializer){}

    parse(url: string): UrlTree {
        // Custom code here
    }

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

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

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

现在，当您调用 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.defaultUrlSerializer.serialize(tree).replace(/%20/g, '+');
}

DefaultUrlSerializer