How can I add segments to ActivatedRoute?

Question

In angularJS, when using UI-Router, you were able to essentially name routes as each state had a name and you could navigate to that route.

For example: $stateProvider.state("base", { url: "/", controller: "baseController" }); and then to navigate to that route you could do something like: $state.go("base");

I am trying to do the same thing in angular v5.2 with ActivatedRoute.

The component I am in has a route of: base/:acctId/:session/upsells/:id/:type

and I want to navigate to base/:acctId/:session/config/:id/:type

I want to add a dynamic segment to the ActivatedRoute that will fill in config/:id so that when I navigate using the Router I can append the :type.

So from the component I am in (base/:acctId/:session/upsells/:id/:type), I want to navigate to another route after adding a couple segments to the ActivatedRoute and calling: this.router.navigate([type], { relativeTo: this.activatedRoute }

There isn't much in the documentation about modifying the ActivatedRoute and I have tried modifying the params but it seems that the Router doesn't use the params to navigate. I have tried doing something similar to Viktor Savkin's comment on this github issue but again I am not sure of the Router.navigate functions behavior.

I've used this.router.createUrlTree(['./config', configId, idd], { relativeTo: this.route.parent}) to yield a url tree that is exactly what I need but the problem is that the this.router.navigate function takes an ActivatedRoute object to navigate relative to instead of a UrlTree object. Is there a map to create an ActivatedRoute object from a url tree?

My router configuration looks like this:

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
            }
        ]
    }
]

Let me know if any of this doesn't make sense, and thank you for your time.

Well to understand how routing segments are configured, you will also have to add your routing configuration. The relativeTo option in router.navigate will depend on the routing configuration. — planet_hunter
@planet_hunter oh shoot, sorry about that. I've added my routing configuration. — Justin

planet_hunter planet_hunter · Accepted Answer · 2018-06-01T21:31:53

Check this stackblitz POC where I have added same routing configuration.

Basically, I have used following routing logic to route to the specified type1 route -

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

this._ActivatedRoute.parent gets up to the parent route viz. base/:acctId/:session & then a relative path is given to reach type1 viz. ./config/1/2/type1

I hope this helps.

How can I add segments to ActivatedRoute?

1 Answers