Handling query parameters with multiple question marks in Angular 2

Question

So basically I couldn't get the correct result with my query parameters. For example we have a query parameter that looks like this:

?encryptedId=zxcvbnm?:112233

The returned result would just be zxcvbnm, the second question mark and all the succeeding characters to it are all omitted.

I've already tried this:

this.businessId = this.router.parseUrl(this.router.url).queryParams["bid"];

and this:

this.activatedRoute.queryParams.subscribe((queryParams: Params) => {
      this.businessId = queryParams['id'];
    }); 

but both codes return the same result. I want to capture everything. Please help. Thanks!

Answer 1

You need to encode it before passing into the URL with encodeURIComponent

Can try encodeURIComponent('zxcvbnm?:112233') on your browser console and you will see the result.

So the ?encryptedId=zxcvbnm?:112233 will become ?encryptedId=zxcvbnm%3F%3A112233

Then from your component, you can retrieve it as the following. I have tested it.

export class QueryParamsComponent implements OnInit {
    constructor(
        private router: Router,
        private route: ActivatedRoute) {
    }

    ngOnInit() {
        let queryParams = this.route.snapshot.queryParams;
        const encryptedId = queryParams['encryptedId'];
    }
}