Angular - 获取当前激活的路线并使用不同的路线参数重新导航到同一页面答案

【问题标题】：Angular - Get current activated route and re-navigate to the same page with different route paramAngular - 获取当前激活的路线并使用不同的路线参数重新导航到同一页面
【发布时间】：2019-06-21 21:54:16
【问题描述】：

在更改标题中搜索文本框中的 itemCode 后，我正在尝试获取当前路线并导航到同一路线。当我最初来到页面时，父路由是“iauth/iauthedit/1706”，然后用户导航到子路由“/info”，还有其他几条用户可以从侧面导航栏导航的路线，如下图所示. 如图所示，当我将应用程序标头中的项目代码更改为 1853 时，URL 应更改为“iauth/iauthedit/1853/info”，如何根据当前路由 URL 动态更改浏览器 URL 路由参数浏览器？，我正在尝试从浏览器 URL 中找到当前场景父级“iauth/iauthedit/”中的当前激活路由，以便进行导航

this.router.navigate(['iauth/iauthedit/', 1853];

以下是目前的路线：

const itemAuthRoutes: Routes = [
    {
        path: 'iauthedit/:itemCode',
        children: [
            {
                path: '',
                canActivate: [AuthGuard],
                //data: { feature: AppFeature.AuthorizedItem },
                component: ItemAuthorizationEditComponent,
                children: [
                    {
                        path: 'info', component: ItemAuthorizationInfoEditComponent
                    }]
            }]
    }]

【问题讨论】：

你想从路由中删除 /info 吗？

标签： angular typescript angular-routing angular-routerlink

【解决方案1】：

你可以尝试遍历routeConfig的path属性

constructor(private activatedRoute: ActivatedRoute, private router: Router) {}

navigate(newId: string) {
  let route = this.activatedRoute.snapshot;
  const parts = [];
  while (route) {
    route.routeConfig && route.routeConfig.path && parts.push(route.routeConfig.path);
    route = route.parent;
  }
  // `parts` now contain your route's pieces - do whatever you deem fit with that
  parts[1] = newId; // i.e. replace the part that needs replacing
  this.router.navigate(parts.reverse());
}

希望这会有所帮助:-)

【讨论】：

【解决方案2】：

Angular 提供的ActivatedRoute 的问题在于它的值取决于注入它的组件。实际上，当您在组件中注入 ActivatedRoute 时，该值不会是完整的路由，而是显示该组件的路由部分。

这意味着如果您想在包含“项目代码”输入的组件中检索完整的 URL，您根本无法使用 Angular API 来完成。所以我建议你使用原生Javascript API解析URL，然后用this.router.navigate触发导航。

Angular 在这一点上有点聪明，它不会重新加载组件，您可以使用 this.activatedRoute.params.subscribe(...) 对参数更改做出反应，然后加载新数据并通过 @ 将其传递给子项987654325@属性。

【讨论】：

我不需要路线参数，我只需要没有参数的当前路线，这样我就可以使用不同的参数重新导航。 eg：iauth是模块路由，iauthedit是组件路由，参数为:itemCode，info是iauthedit组件中的子路由。现在，如果我要更改参数并重新加载页面。我需要 iauth/iauthedit 从浏览器 url 中排除 itemcode 参数和 /info 子路由，这样我就可以导航 this.router.navigate(['iauth/iauthedit/',1888]);
好的，我以为您想保留 /info 段。那么你就可以实现它如果持有“item code”输入的组件是ItemAuthorizationEditComponent
好的，谢谢，如何从浏览器 URL 获取当前路由，this.route.navigate 是在应用程序级别的头部某处完成的，因此在这种情况下需要从浏览器 url 获取当前激活的路由iauth/iauthedit，
那么正如我所解释的，你不能用 Angular 来做到这一点。唯一的方法是document.location.pathname 或类似的

【解决方案3】：

在我的情况下，我需要路由路径，即 /iauth/iauthedit/:itemCode。因此，为了实现这一点，我使用了在组件中注入的 ActivatedRoute 和 Router。

ActivatedRoute 对象具有 'pathFromRoot' 数组，其数组的最后一个元素包含 'routerConfig' 中的路由器配置路径和参数值（即 iauthedit/:itemCode），然后合并形成完整的路由器配置路径。

由于您需要没有路由参数的完整路由路径，您可以使用字符串操作来获取路由参数之前的路径，如下所示

    constructor(private router: Router, private route: ActivatedRoute) {
        let url = this.router.url;
        const index = this.router.url.lastIndexOf(this.route.pathFromRoot[this.route.pathFromRoot.length - 1].routeConfig.path.split('/')[0]);    
        url = this.router.url.substring(0, index) + this.route.pathFromRoot[this.route.pathFromRoot.length - 1].routeConfig.path;
        console.log(this.router.url) //  /iauth/iauthedit/1853
        console.log(url) // /iauth/iauthedit/:itemCode
        let yourRequiredUrl = url.split(':')[0]  // /iauth/iauthedit/
}

希望这会有所帮助。

【讨论】：