Angular2 router listen to parameter changes

Question

I have several links navigating as

http://localhost:4200/#/forward/services/our-services?category=1 http://localhost:4200/#/forward/services/our-services?category=2 http://localhost:4200/#/forward/services/our-services?category=3

I would like to fetch the value of category

Ive tried

this.sub = this._activatedRoute.params.subscribe(params => { this.category = + params['category']; console.log(params['category']); });

The console.log() is only printend once ,

How can i ensure i capture whenever the value of category changes

This is what am using for navigation

<ul id="menu-services-menu" class="menu" *ngFor="let category of categories"> <li><a routerLinkActive="active" [routerLink]="['/forward/services/our-services']" [queryParams]="{ category: category.category }" >{{category.category}}</a></li> </ul>

You want the changes in queryParams, not in params. angular.io/docs/ts/latest/api/router/index/… — JB Nizet
– JB Nizet, Commented Feb 26, 2017 at 14:28
what of the routerLinkActive class always remains active even when the params change — Geoff
– Geoff, Commented Feb 26, 2017 at 14:56

Günter Zöchbauer · Accepted Answer · 2017-02-26 14:27:02Z

constructor(router:Router, route:ActivatedRoute) { router.events filter(e => e instanceof NavigationEnd) .forEach(e => console.log(route.snapshot.params['category']); }

John · Accepted Answer · 2017-11-29 12:53:13Z

You can also with Angular 2 (Angular 5 as of this writing) do this:

constructor(private router:Router) { router.events.subscribe(data=>{ if(data instanceof ActivationEnd){ this.category = data.snapshot.params['category']; } }); }

Mwiza · Accepted Answer · 2022-04-04 10:34:55Z

Instead of subscribing the route.events and then have to check or filter the events is possible to subscribe the specific queryParams and just get the params. I think is a more clean solution for this problem. constructor(private route: ActivatedRoute, private router: Router) {}

ngOnInit() { this.route .queryParams .subscribe(params => { this.page = params['category']; }); }

This is what the op was doing (though params vs queryParams). The issue is that it doesn't update when the params are changed. It works fine the first time.

Collectives™ on Stack Overflow

Angular2 router listen to parameter changes

3 Answers 3

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Related