Is it possible to update one defined router parameter?

Question

The standard way to navigate to a route is

this.router.navigate(["/details", "30"]

with the following route configuration:

{ path: "details/:id", component: TestRouteComponent }

The constructor of my class would be

constructor(private router: Router, private route: ActivatedRoute) { }

What I want to do is to just update the id of the current route.

Something like

this.route.params.id = 10;

and then navigate to that route

this.router.navigate(this.route);

Is that possible with angular routing?

Gregor Woiwode · Accepted Answer · 2017-06-29 12:22:41Z

You cannot manipulate params since this is an Observable. You can do something like this:

router.navigate(['..', 2], { relativeTo: route });

The two dots are indicating that you move one level up.

from `welcome/1` to `welcome`

After that your param is appended to the route.

But I wonder if there is a nicer way to do a simple change of the parameter.

Gregor Woiwode · Accepted Answer · 2017-06-29 13:52:03Z

Am I right, that you want to react on changes inside a component when the params of its route has changed?

When yes, you do not want to trigger a new navigation. You simply subscribe to changes of params.

 constructor(private route: ActivatedRoute) { this.route.params.subscribe(params => { /* access updated params and trigger further actions */ } }

Now if you have multiple links (e.g. routerLink) pointing to your component having just different parameters the router will detect that no new route has to be activated. Therefore you cann subscribe to params or paramMap.

paramMap gives you more control accessing certain parameters of the route.

Collectives™ on Stack Overflow

Is it possible to update one defined router parameter?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related