I'm unable to pass route params

Question

I'm passing a route param from the calling page with the following code:

   showProfile(id: string) {
    const navigationParam: NavigationExtras = {
      queryParams: {
        userId: id
      }
    };
    console.log('navParm', navigationParam);
    this.router.navigateByUrl('view-profile', navigationParam);
   }

console.log shows navigationParam with the data. However, the console log on the view-profile page is not

  constructor(private route: ActivatedRoute,
              private router: Router) {
    this.route.queryParams.subscribe(params => {
      console.log('params', params);
    });
  }

Answer 1

You should use navigate function for this, there an issue when passing queryParams with navigateByUrl:

 this.router.navigate(['view-profile'], navigationParam);

In your view-profile page:

constructor( private route: ActivatedRoute,
             private router: Router ) {
    this.route.queryParams.subscribe(params => {
       console.log(params['userId']);
    });
  }
}