List of queryParams is empty in Angular 5 routing

Question

I'm new to Angular and I've looked for solution of my problem, but unfortunately I haven't found that. When I 'm passing parameters to the router (class Router), but list of params (on target site) is empty.

let navigationExtras: NavigationExtras ={
  queryParams: {
    uri: item.uri
  }
}

this.router.navigateByUrl('articlelist/article-details', navigationExtras);

Article-details component (route is ActivatedRoute class):

   ngOnInit(): void {
        console.log("ArticleDetailsComponent " + JSON.stringify(this.route.url));
    this.route.queryParamMap.map(paramMap =>{
            this.uri = paramMap.get('uri');
            console.log(this.uri);
        });
    }

Routing in ArticleList module (one of modules in my project):

const routes: Routes = [{
  path: '',
  component: ArticleListComponent,
    data: {
      title: 'ArticleList'
    },
  },
{
  path: 'article-details',
  component: ArticleDetailsComponent,
  data: {
    title: 'ArticleDetails'
  },
}
];

When I logged route.url in target component the result was:

ArticleDetailsComponent {"_isScalar":false,"observers":[],"closed":false,"isStopped":false,"hasError":false,"thrownError":null,"_value":[{"path":"article-details","parameters":{}}]}

If somebody knows how to fixed it, I'll be grateful for help :)

Answer 1

You should need to use ActivatedRoute in order to get all query params.

Try this -

constructor(
    private activatedRoute: ActivatedRoute
  ) { }

this.activatedRoute.queryParams.subscribe(params => {
      const URI = params['uri'];
    });

Update

Try to send params like this -

this.router.navigate(['articlelist/article-details' ], {
      queryParams: {
        uri: item.uri || 'Default'
      }
    });