Subscribe to both route params and queryParams in Angular 2

Question

I have set up the following routing system

export const MyRoutes: Routes = [   {path: '', redirectTo: 'new', pathMatch: 'full'},   {path: ':type', component: MyComponent} ]; 

and have the following navigation system

goToPage('new'); goToPageNo('new', 2);  goToPage(type) {   this.router.navigate([type]); } goToPageNo(type, pageNo) {   this.router.navigate([type], {queryParams: {page: pageNo}}); } 

Sample URL looks like this

http://localhost:3000/new

http://localhost:3000/new?page=2

http://localhost:3000/updated

http://localhost:3000/updated?page=5

Sometimes they have optional queryParams (page)

Now I need to read both route params and queryParams

ngOnInit(): void {   this.paramsSubscription = this.route.params.subscribe((param: any) => {     this.type = param['type'];     this.querySubscription = this.route.queryParams.subscribe((queryParam: any) => {       this.page = queryParam['page'];       if (this.page)         this.goToPageNo(this.type, this.page);       else         this.goToPage(this.type);     })   }) }  ngOnDestroy(): void {   this.paramsSubscription.unsubscribe();   this.querySubscription.unsubscribe(); } 

Now this is not working as expected, visiting pages without queryParams works, then of I visit a page with queryParams "goToPageNo" gets called multiple times, as I am subscribing to queryParams inside route params.

I looked at the Angular 2 documentation, they do not have any example or codes where a subscription to both route params and queryParams is implemented at the same time.

Any way to do this properly? Any suggestions?

Answer 1

I managed to get a single subscription to both the queryParams and Params by combining the observables by using Observable.combineLatest before subscribing.

Eg.

var obsComb = Observable.combineLatest(this.route.params, this.route.queryParams,    (params, qparams) => ({ params, qparams }));  obsComb.subscribe( ap => {   console.log(ap.params['type']);   console.log(ap.qparams['page']); }); 

Answer 2

For Angular 6+

import { combineLatest } from 'rxjs'; import { map } from 'rxjs/operators';  ...  combineLatest(this.route.params, this.route.queryParams)     .pipe(map(results => ({params: results[0].xxx, query: results[1]})))     .subscribe(results => {         console.log(results);     }); 

Where xxx is from your route

{path: 'post/:xxx', component: MyComponent},