如何将路段添加到 ActivatedRoute？

Question

在 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's comment on this github issue 的事情，但我再次不确定 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
            }
        ]
    }
]

如果有任何不合理的地方请告诉我，谢谢你抽出时间。

Answer 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

希望对您有所帮助。

如何将路段添加到 ActivatedRoute？

How can I add segments to ActivatedRoute?

angular

angular-router

angular-activatedroute