Using query params in Ionic 4

Question

I am shifting an Ionic 3 project to Ionic 4. This is a web project.

On scanning QR code, page opens. URL looks like:

domain.com/qanda/pwa/home?user=simon&skill=ionic&role=Admin&Table=132

Till Ionic 3, everything was fine. If I add these params in Ionic 4 and run, it opens domain.com/qanda/pwa/ - A blank page, doesn't even open home page by default.

I have kept .htaccess file beside index.html so that I can directly open any project page from url. Below is the code of .htaccess:

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

RewriteRule (.*) https://%{HTTP_HOST}/qanda/pwa/index.html

How can I achieve query params in Ionic 4?

Answer 1

if you have already URL like you post

domain.com/qanda/pwa/home?user=simon&skill=ionic&role=Admin&Table=132

Just use ActivatedRoute to get value of param:

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute)

ngOnInit() {
  this.route.queryParams.subscribe(params => {
  if (params) {
    let queryParams = JSON.parse(params);
    console.log(queryParams)
  }
});
}