Angular 角度NgRx-串联辅助插座，如何

假设我有以下URL:

我现在可以使用自定义路由序列化器获取url：

export class CustomRouteSerialiser implements RouterStateSerializer<NotImportantForStackOverflow> {
  serialize(routerState: RouterStateSnapshot) {
    let route = routerState.root;

    while (route.firstChild) {
        route = route.firstChild;
    }

    const { url } = routerState;

    return {
        url,
    };
  }
}

但是，这是一个非类型的私有属性，我不应该使用它，但同时我找不到其他任何东西。
我找不到任何关于如何以干净的方式做这件事的信息

那么，我应该如何以干净的方式串行化辅助插座呢

注意：我宁愿通过

routerState.root.\u urlsgment.children.sidePanel.segments

然后映射该点的段数组，我宁愿复制信息并手动将辅助路由存储到其他地方，脏的换脏的

我目前的解决方案（我对此不满意）：

---

那么，让我们来了解一下上下文。在我的例子中，我有可能在主出口中有多个参数，还有可能有一个带有参数的辅助路由。 示例路由：

/user/lgxAXtn…h2/home（模式：items/0fn…Z83）

因此，我提出的解决方案是创建所有参数的集合。首先，我们需要打破递归，这样它就不会那么混乱了（至少对我来说）

遍历（根：ActivatedRouteSnapshot）：参数{
//要返回的对象
设params:params={}；
//起点
让route=root；
//迭代直到到达终点
while（route.firstChild）{
route=route.firstChild；
//收集途中的所有参数（如有）
params={…params，…route.params}；
}
返回参数；
}

现在，这完成了大部分的繁重工作，但我们还没有完全完成

序列化（routerState:RouterStateSnapshot）：RouterReducer.State{
//因为我们想要一个对象，所以我们可以减少数组。
//root.children提供主要和模式出口
const params=routerState.root.children.reduce(
（acc，curr）=>（{…acc，…this.transverse（curr）}），
{}
);
//完整url
const{url}=routerState；
返回{url，params}；
}

结果如何

状态：{
url:“/user/lgxAXtn…h2/home（模式：items/0fn…Z83）”，
参数：{
userId:'lgxAXtn…h2'，
itemId:'0fn…Z83'
}
}

这是我想出的一个更有趣的小解决方案，到目前为止，它一直对我很好。如果您使用此方法遇到任何问题，请告诉我

完整的serializer.ts

导入{
激活的路由快照，
Params，
路由器状态快照
}来自“@angular/router”；
从'@ngrx/router-store'导入{RouterStateSerializer}；
从“../reducers/router.reducer”导入*作为RouterReducer；
导出类参数序列化程序
实现RouterStateServalizer{
私有遍历（根：ActivatedRouteSnapshot）：参数{
//要返回的对象
设params:params={}；
//起点
让route=root；
//迭代直到到达终点
while（route.firstChild）{
route=route.firstChild；
//收集途中的所有参数（如有）
params={…params，…route.params}；
}
返回参数；
}
序列化（routerState:RouterStateSnapshot）：RouterReducer.State{
//因为我们想要一个对象，所以我们可以减少数组。
//root.children提供主要和模式出口
const params=routerState.root.children.reduce(
（acc，curr）=>（{…acc，…this.transverse（curr）}），
{}
);
//完整url
const{url}=routerState；
返回{url，params}；
}
}

---

现在，在我的例子中，我将其用于参数-获取段只是一点修改。类似于

route.url

的内容，而不是遍历函数中的route.params。

因此，让我们了解一些上下文。在我的例子中，我有可能在主出口中有多个参数，还有可能有一个带有参数的辅助路由。 示例路由：

/user/lgxAXtn…h2/home（模式：items/0fn…Z83）

因此，我提出的解决方案是创建所有参数的集合。首先，我们需要打破递归，这样它就不会那么混乱了（至少对我来说）

遍历（根：ActivatedRouteSnapshot）：参数{
//要返回的对象
设params:params={}；
//起点
让route=root；
//迭代直到到达终点
while（route.firstChild）{
route=route.firstChild；
//收集途中的所有参数（如有）
params={…params，…route.params}；
}
返回参数；
}

现在，这完成了大部分的繁重工作，但我们还没有完全完成

序列化（routerState:RouterStateSnapshot）：RouterReducer.State{
//因为我们想要一个对象，所以我们可以减少数组。
//root.children提供主要和模式出口
const params=routerState.root.children.reduce(
（acc，curr）=>（{…acc，…this.transverse（curr）}），
{}
);
//完整url
const{url}=routerState；
返回{url，params}；
}

结果如何

状态：{
url:“/user/lgxAXtn…h2/home（模式：items/0fn…Z83）”，
参数：{
userId:'lgxAXtn…h2'，
itemId:'0fn…Z83'
}
}

这是我想出的一个更有趣的小解决方案，到目前为止，它一直对我很好。如果您使用此方法遇到任何问题，请告诉我

完整的serializer.ts

导入{
激活的路由快照，
Params，
路由器状态快照
}来自“@angular/router”；
从'@ngrx/router-store'导入{RouterStateSerializer}；
从“../reducers/router.reducer”导入*作为RouterReducer；
导出类参数序列化程序
实现RouterStateSerializer{
私有遍历（根：ActivatedRouteSnapshot）：参数{
//要返回的对象
设params:params={}；
//起点
让route=root；
//迭代直到到达终点
while（route.firstChild）{
route=route.firstChild；
//收集所有
routerState.root._urlSegment.children.sidePanel.segments  

// tslint:disable-next-line:no-any
const sidePanelOutlet  = (routerState.root as any)._urlSegment.children.sidePanel;
const auxiliaryOutlets = {
    sidePanel: sidePanelOutlet && sidePanelOutlet.segments[ 0 ].path,
};