3

在更改标题中搜索文本框中的 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
                    }]
            }]
    }]
4

3 回答 3

1

您可以尝试遍历routeConfig'spath属性

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());
}

希望这有所帮助 ：-）

于 2019-02-01T14:48:37.463 回答
0

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

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

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

于 2019-02-01T13:14:16.450 回答
0

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

ActivatedRoute 对象具有“pathFromRoot”数组，其数组的最后一个元素包含“routerConfig”中的路由器配置路径和参数值（ieiauthedit/: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/
}

希望这可以帮助。

于 2019-02-06T07:18:45.940 回答