Question

如何在Angle 8中的NavigationStart事件上获取路由器路径

    this.router.events
      .pipe(filter(event => event instanceof NavigationStart))
      .subscribe((event: NavigationStart) => {
         // how to get router path of on going navigation
      });

我可以使用event.url，但是我的应用程序中有一些命名出口，URL由打开的命名出口混合而成。因此希望在NavigationStart上找到正在进行的导航的路由器路径。

Answer 1

使用ActivatedRoute而不是Router

您可以订阅url并加入细分受众群，也可以使用snapshot。这里有充分的记录。

https://angular.io/api/router/ActivatedRoute#properties

Answer 2

同时注入Router和ActivatedRoute服务。

导航开始时，遍历激活的路线以找到出口。

您可以使用以下代码作为起点。

this.router.events
    .pipe(
        filter(event => event instanceof NavigationStart),
        map(() => this.activatedRoute),
        map(activatedRoute => {
            while (activatedRoute.firstChild !== null) {
                activatedRoute = activatedRoute.firstChild
            }

            return activatedRoute
        }),
        filter(activatedRoute => activatedRoute.outlet === "primary"),
        mergeMap(activatedRoute => activatedRoute.url),
    )

注意：即使您在根组件中编写此代码，该代码也将起作用。激活的路径不仅表示注入它的特定组件的路径。激活的路线代表通向当前路线的整个路线树。

在您的根组件激活路由中，是对激活该组件的路由的引用，即“ /”。但是，您可以沿着路线树向下浏览以访问其他路线（如果有）。

类似地，在其他组件中，激活的路由是对激活该组件的路由的引用。但是您可以上下移动以访问其他路线。

在导航角8的NavigationStart上获取路由器路径

2 个答案: