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

【问题标题】：Get router path on NavigationStart of on going navigation angular 8在导航角 8 的 NavigationStart 上获取路由器路径
【发布时间】：2020-05-09 10:07:19
【问题描述】：

如何在角度 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 上找到正在进行的导航的路由器路径。

【问题讨论】：

标签： angular typescript angular-routing

【解决方案1】：

使用ActivatedRoute而不是Router

您可以订阅url observable 并加入细分市场或使用snapshot。这里有很好的记录。

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

【讨论】：

谢谢 Sunil，如果我理解正确的 ActivatedRoute 是一次性的，并且适用于特定组件。我希望实现应用程序范围的逻辑，该逻辑在 NavigationStart 事件上继续导航路由器路径，我的意图是应在应用程序中的任何导航更改上执行。

【解决方案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),
    )

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

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

类似地，在其他组件中，激活的路由是对激活该组件的路由的引用。但是你可以上下穿梭去参观其他路线。

【讨论】：

谢谢 Tuhin，这有点接近我要找的东西.. 问题是我有一个主要出口和 2 个命名出口.. 我也应该寻找命名出口路线.. 它变得很小观看它们有问题.. 所以我最终在这里使用 location.onUrlChange 我可以更好地控制以前的 URL，并且很容易获得新的变化。