Can't get query parameters from ActivatedRoute

Question

I have a route defined like this in the routing module:

{ path: 'warning/:type', component: WarningPageComponent }

When the app wants to navigate to the warning page this call is made:

const navigationExtras: NavigationExtras = {
        queryParamsHandling: 'preserve',
        queryParams: { errorCode: '12345'}
      };
return this.router.navigate(['/warning/default'],navigationExtras);

In the WarningPageComponent the parameters are read like this ngOnInit():

const params = this.route.snapshot.paramMap;
console.log('ERR warning page' + JSON.stringify(params));
const errorCode = params.get('errorCode') ?? undefined;
const type = params.get('type') ?? undefined;

The problem is now that only the type is present in the paramMap but not the errorCode. What is wrong here? I also tried with queryParamsHandling: 'preserve'

Angular 8.2.14

I found no solution in:

score 1 · Accepted Answer · answered Dec 04 '20 at 10:55

1

If you want to access queryParams then you have to use queryParamMap on snapshot object.

const queryParams = this.route.snapshot.queryParamMap;
const errorCode = queryParams.get('errorCode') ?? undefined;

answered Dec 04 '20 at 10:55

Chellappan வ

23,645
3
29
60

Can you give some background information in your answer, why it have to be `queryParamMap` instead of `paramMap`? – Chriss Dec 04 '20 at 12:50
1

@Chriss https://stackoverflow.com/questions/49615857/angular-parammap-vs-queryparammap – Chellappan வ Dec 04 '20 at 13:16

score 0 · Answer 2 · answered Dec 04 '20 at 11:07

Do like this get the params inside constructor

import { ActivatedRoute } from '@angular/router';
    export class DashboardComponent implements OnInit, AfterViewChecked, OnDestroy {
    queryParams: any;
    constructor(private activatedRoute: ActivatedRoute) {
        this.queryParams = Utils.paramsToLower(this.activatedRoute.snapshot.queryParams);
      }
    }

Can't get query parameters from ActivatedRoute

2 Answers2