Angular 当管道与skipWhile结合使用时，如何获取路由器参数？

我有一个动态面包屑导航，需要从URL获取参数。为了实现这一点，我正在执行以下代码：

const userId = this.activatedRoute.params
               .pipe(skipWhile((params: Params) => Number.isNaN(+params['userId'])));

const getAppUserId = userId.pipe(
            switchMap((params: Params) => {
                return +params['userId']
                    ? this.myAppService.getApplicationUser(+params['userId'])
                    : of('')
            }))

但它总是空的，而且我从来没有把参数传递给可观察对象。当我使用

queryParams

时，它工作得很好，但我不想使用

queryParams

概念。

---

知道我哪里出了问题吗？

我曾经制作了一个自动面包屑生成器，它只依赖于路线中的静态数据。我设法把它找回来了，给你，以防万一：

导出类RouteReadCrumpsComponent{
面包屑=[]；
建造师(
专用路由器：路由器，
) {
让缓冲区=[]；
/* 
按相反顺序侦听路由器事件（以获取所有事件）。
从快照中，返回其路径和面包屑。
*/
此为.router.events.pipe(
过滤器（事件=>ActivationEnd的事件实例），
映射（（事件：ActivationEnd）=>[
event.snapshot.data&&event.snapshot.data.crumb | |未定义，
此.determineCorrectPath（event.snapshot），
]),
过滤器（（[crumb，url]）=>！！crumb），
).subscribe（（[crumb，url]）=>buffer.push（{crumb，url}））；
此为.router.events.pipe(
筛选器（事件=>NavigationEnd的事件实例）
).订阅（事件=>{
this.breadcrumbs=buffer.reverse（）；
缓冲区=[]；
});
}
确定正确路径（快照：ActivatedRouteSnapshot）{
const path=snapshot.routeConfig.path；
常量参数=snapshot.params；
//Path=带有参数的路由，因此获取参数
if（path.startsWith（'：'））
返回参数[path.replace（'：'，''）；
//Path=''=延迟加载模块的路由组或根路由，因此采用父路径
else如果（！path）
返回snapshot.parent.routeConfig.path；
//路径可以按原样使用
其他的
返回路径；
}
建筑布线阵列（索引：编号）{
把这个还给我。面包屑
.slice（0，索引+1）
.map（crumb=>crumb.url）
。加入（“/”）；
}
}

您所要做的就是为每个路由提供

数据：{crumb:'Your component crumb'}

，它应该可以工作

第一期：

Number.isNaN(+params['userId'])

返回字符串，而不是数字

第二期：

const getAppUserId = userId.pipe(
  switchMap((params: Params) => {

您不是从可观察对象获取参数，而是从用户ID（实际上是一个布尔值）获取参数

如果您希望“从/通过observable获取参数id，然后将其用于：getAppUserId和switchMap，以使用我从snapshot.params获取的参数id进行HTTP调用”

那么正确的代码应该是

this.activatedRoute.params.pipe(
  map(params => params.id),
  switchMap(userId => this.myAppService.getApplicationUser(userId)
);

---

您不应该测试ID的有效性：URL是字符串，您不能信任用户。只需发出请求，如果ID与任何内容都不匹配，那么您的API将不会返回任何内容。让API生成ID上的所有控件，而不是您的客户端

问题已解决。有点简单…修复方法是从

路由捕捉参数。快照

this.router.events
        .pipe(filter(event => event instanceof NavigationEnd))
        .pipe(map(() => {return this.activatedRoute;}))
        .pipe(
            map((route) => {
                while (route.firstChild) {route = route.firstChild;}
                return route;
            })
        ).subscribe(route => {
             console.log(`param: ${route.snapshot.params['id']}`);
             ...
             ...
        });

没有按预期工作。你什么也没表现出来。你没有错过什么吗？是否应该不调用
buildRoutingArray（索引：number）
？现在看来，它根本没有被调用。@k.vincent。但我给出它不是为了让你可以使用它，我给出它是为了帮助你理解它是如何工作的。因此，不，我没有遗漏任何内容，它的工作方式是epxected，
buildRoutingArray
是一个显示crumps.Ok的HTML函数。我明白了。伟大的我会按照这个方法来的，我明白了。好的。但我的问题是从/通过observable获取param
id
，然后将其用于：
getAppUserId
，并使用switchMap使用我从
snapshot.params
获取的param
id
进行HTTP调用。这就是我被困的地方。@k.vincent对此做出另一个回答，请稍等片刻。ll no
params.id
。我将
userId
更改为：
this.activatedRoute.params.pipe（skipWhile（（params:params）=>params['id']）
我认为问题仍在我使用
skipWhile
的这一部分。你介意我继续在聊天室而不是在这里吗？@k.vincent你可以，但我回答的更少（我的手机上有堆栈通知，但聊天室没有）。最好是对你的问题做一个简单的描述，这样我就可以直接看到并纠正它。这里有一个演示，但它不起作用，因为我试图获得所有必要的文件，但这个概念是一种大而复杂的，我可以提供所有的文件。但是这个演示会让你充分了解我真正想要记录的内容。请提供一个或任何其他方法来重现你的错误。@zerocewl:我正试图提供一个Stackblitz演示。需要一点时间。