2

在 angularJS 中，当使用 UI-Router 时，您基本上可以命名路由，因为每个状态都有一个名称，并且您可以导航到该路由。

例如： $stateProvider.state("base", { url: "/", controller: "baseController" }); 然后导航到该路线，您可以执行以下操作： $state.go("base");

我正在尝试在 angular v5.2 中使用ActivatedRoute做同样的事情。

我所在的组件有一条路线：base/:acctId/:session/upsells/:id/:type

我想导航到base/:acctId/:session/config/:id/:type

我想向将填充的 ActivatedRoute 添加一个动态段，config/:id以便当我使用路由器导航时，我可以附加:type.

因此，从我所在的组件（base/:acctId/:session/upsells/:id/:type）中，我想在向 ActivatedRoute 添加几个段并调用之后导航到另一条路线： this.router.navigate([type], { relativeTo: this.activatedRoute }

文档中没有太多关于修改 ActivatedRoute 的内容，我尝试修改参数，但似乎路由器不使用参数进行导航。我尝试过类似于Viktor Savkin 对此 github 问题的评论，但我再次不确定 Router.navigate 函数的行为。

我曾经this.router.createUrlTree(['./config', configId, idd], { relativeTo: this.route.parent})生成一个正是我需要的 url 树，但问题是 this.router.navigate 函数采用 ActivatedRoute 对象而不是 UrlTree 对象进行相对导航。是否有从 url 树创建 ActivatedRoute 对象的地图？

我的路由器配置如下所示：

const routes: Routes = [
    {
        path: "base/:acctId/:session",
        children: [
            {
                path: "config/:configid/:idd",
                component: ListViewItemDetailComponent,
                children: [
                    {
                        path: "type1", <----- i want to get here
                        component: type1Component
                    },
                    {
                        path: "type2",
                        component: type2Component
                    },
                    {
                        path: "type3",
                        component: type3Component
                    }
                ]
            },
            {
                path: "upsells/:id/:type", <------ I am here
                component: UpsellsComponent
            }
        ]
    }
]

如果有任何不妥之处，请告诉我，感谢您抽出宝贵时间。

4

1 回答 1

1

检查我添加了相同路由配置的这个stackblitz POC 。

基本上，我使用了以下路由逻辑来路由到指定的type1路由 -

this._router.navigate(['./config/1/2/type1'], {
  relativeTo: this._ActivatedRoute.parent
});

this._ActivatedRoute.parent起床到父路线，即。base/:acctId/:session& 然后给出到达type1即的相对路径。./config/1/2/type1

我希望这有帮助。

于 2018-06-01T21:31:53.303 回答