Angular2 Url编码的JSON矩阵参数

Question

我遇到Angular2处理url编码的JSON矩阵参数的问题。我需要创建一个自定义UrlSerializer，以便处理JSON中字符串字段内的括号。例如：用户代理字符串。自定义序列化程序如下所示：

import { Injectable } from '@angular/core';
import { DefaultUrlSerializer, UrlSerializer, UrlTree } from '@angular/router';

@Injectable()
export class CustomUrlSerializer implements UrlSerializer {
    constructor(
        private defaultUrlSerializer: DefaultUrlSerializer
    ) {}
    parse(url: string): UrlTree {

        const defaultTree = this.defaultUrlSerializer.parse(url);
        return defaultTree;
    }

    serialize(tree: UrlTree): string {
        // Use the default serializer to create a url.
        const defaultSerialization = this.defaultUrlSerializer.serialize(tree);
        const parenthesisFix = defaultSerialization
            .replace(/\(/g, '%28')
            .replace(/\)/g, '%29');
        return parenthesisFix;
    }
}

正如您所看到的，除了标准序列化之外，括号还被序列化，默认情况下，假定括号是特殊字符。 代码适用于简单值。这里，两个矩阵参数（'comp_id'和'camp_id'）被解析为URL树。

检查root.children.primary.segments [“0”]。参数树的路径产生了我们期望反序列化的对象：

路由器params订阅遵循预期的那些参数：

然而，在矩阵参数（本例中为'r'）是url编码的JSON字符串的情况下，我们有：

同样，在树的root.children.primary.segments [“0”]。参数路径中，我们可以看到我们期望填充的对象（注意：括号被正确反序列化并且此时字符串是有效的JSON，而不是它应该重要，因为这只是一个字符串字段）：

除此之外，route params订阅会观察到一个空对象！

我怀疑Angular在反序列化后正在对内容进行消毒，但我还未能证实这一点。有什么建议吗？

Answer 1

这最终成为范围/ DI问题。当我直接从组件订阅路径参数时（我已将其推送到服务中），JSON矩阵参数开始工作。