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

Question

我有一个动态面包屑导航，需要从 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('')
            }))

但它总是空的，我从来没有得到传递给 Observable 的参数。当我使用 queryParams 时，它工作正常，但我不想使用 queryParams 概念。知道我哪里出错了吗？

Answer 1

我曾经做过一个自动面包屑构建器，它只依赖于路由中的静态数据。我设法找回了它，所以给你，以防有帮助：

export class RouteBreadcrumbsComponent {

  breadcrumbs = [];

  constructor(
    private router: Router,
  ) {
    let buffer = [];

    /* 
       Listen for router events in reverse order (to get all events).
       From the snapshots, return its path and its breadcrumb.
    */
    this.router.events.pipe(
      filter(event => event instanceof ActivationEnd),
      map((event: ActivationEnd) => [
        event.snapshot.data && event.snapshot.data.crumb || undefined,
        this.determineCorrectPath(event.snapshot),
      ]),
      filter(([crumb, url]) => !!crumb),
    ).subscribe(([crumb, url]) => buffer.push({ crumb, url }));

    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(event => {
      this.breadcrumbs = buffer.reverse();
      buffer = [];
    });
  }

  determineCorrectPath(snapshot: ActivatedRouteSnapshot) {
    const path = snapshot.routeConfig.path;
    const params = snapshot.params;

    // Path = route with a param, so get the param
    if (path.startsWith(':'))
      return params[path.replace(':', '')];
    // Path = '' = route group or root route of a lazy loaded module, so take the parent path
    else if (!path)
      return snapshot.parent.routeConfig.path;
    // Path can be used as is
    else
      return path;
  }

  buildRoutingArray(crumbIndex: number) {
    return this.breadcrumbs
      .slice(0, crumbIndex + 1)
      .map(crumb => crumb.url)
      .join('/');
  }
}

您所要做的就是为您的每条路线提供一个 data: { crumb: 'Your component crumb' }，它应该会起作用。

Answer 2

第一期：

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

Returns 一个字符串，不是一个数字。

第二期：

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

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

如果你的愿望是"get param id from/via observable and after that use it for: getAppUserId with switchMap to make a HTTP call with the param id which I got from snapshot.params"

那么正确的代码是

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

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

Answer 3

问题已解决。有点简单...解决方法是从 route.snapshot.

捕获参数

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']}`);
             ...
             ...
        });

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

How to get Router params when using pipe in combination with skipWhile?

angular

router

angular-activatedroute