Как я могу добавить сегменты в 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, и я попытался изменить параметры, но кажется, что маршрутизатор не использует параметры для навигации. Я попытался сделать что-то похожее на комментарий Виктора Савкина по этому вопросу github, но опять же я не уверен в поведении функций Router.navigate.

Я использовал this.router.createUrlTree(['./config', configId, idd], { relativeTo: this.route.parent}) чтобы получить дерево URL, это именно то, что мне нужно, но проблема в том, что функция this.router.navigate принимает объект ActivatedRoute для навигации относительно объекта вместо объекта UrlTree. Есть ли карта для создания объекта ActivatedRoute из дерева URL?

Моя конфигурация роутера выглядит так:

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

Проверьте этот POC, где я добавил ту же конфигурацию маршрутизации.

В основном, я использовал следующую логику маршрутизации, чтобы направить к указанному type1 маршрут -

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

this._ActivatedRoute.parent встает на родительский маршрут, а именно. base/:acctId/:session и затем дается относительный путь для достижения type1 а именно ./config/1/2/type1

Надеюсь, это поможет.