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 :)

Try ```console.log(this.route.snapshot.queryParamMap)``` inside of your ngOnInit — Markus Kollers, Jun 26 '18 at 08:27
Did you try with a hard coded string instead of item.uri, it might be undefined. Can you see the query string params on browser? — Akshay Rana, Jun 26 '18 at 08:53

Pardeep Jain · Accepted Answer · 2018-06-26T08:44:48.090

6

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'
      }
    });

edited Jun 26 '18 at 08:44

answered Jun 26 '18 at 08:33

Pardeep Jain

84,110
37
165
215

1

params['uri'] is undefined :/ – miclski Jun 26 '18 at 08:37
are you sure params is sending properly while routing – Pardeep Jain Jun 26 '18 at 08:40
How to check this ? – miclski Jun 26 '18 at 08:40
check in the browser URL – Pardeep Jain Jun 26 '18 at 08:40
No, your query params is not sending properly, check my updated answer and do your code like that – Pardeep Jain Jun 26 '18 at 08:45
I understand `ActivatedRoute` is `BehaviourSubject` behind the scene so by default it sends null or no query params even if params exisit in the URL. I want to use lettable operators using `pipe` and `mergeMap` and then use this param to make HTTP service call; however in mergemap param is always empty ! Any solution for this problem? – user1608841 Sep 07 '18 at 07:07
i always get 2 events, the first is empty the second is ok, how to avoid the empty one? Becaus if it is empty i must trigger an http request, and i cannot know if ther will come a second or not. – wutzebaer Sep 03 '21 at 18:47

score 0 · Answer 2 · edited Jun 26 '18 at 09:09

0

You can define the param in your app.routing.module.ts:

{ path: 'examplePath/:id', component: YourComponent},

and send like that:

this.router.navigate(['/examplePath/' + id]); (with @angular/router/Router)

Then in your component constructor you can get param (with @angular/router/ActivatedRoute):

this.activatedRoute.params.subscribe(params => {
    this.yourObject = params['id'];
}

edited Jun 26 '18 at 09:09

Rence

2,900
2
23
40

answered Jun 26 '18 at 08:52

chinaski

116
1
7

5

thats not a query param – Heady Mar 29 '19 at 16:32
it is. You can also subscribe to activatedroute.queryParams in the same manner – Heady Apr 08 '19 at 14:39

score -2 · Answer 3 · answered Jun 26 '18 at 08:33

-2

Instead of relying on Observables, I would advise you to get a snapshot of your route. This will give you a simple object containing your params.

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  console.log(this.route.snapshot.queryParams);
}

answered Jun 26 '18 at 08:33

1

Unfortunately, result is an empty list :/ – miclski Jun 26 '18 at 08:39
Then you have an issue with your routing. Please post a [mcve] reproducing the issue. – Jun 26 '18 at 08:40
3

I also see an empty list. When I use the `this.activatedRoute.queryParams.subscribe` form, I do get the query parameters eventually, but if I use the `this.activatedRoute.snapshot.queryParams` form that's empty. It's like the snapshot is being taken too early. – Eric Lee Nov 02 '18 at 22:49

List of queryParams is empty in Angular 5 routing

3 Answers3

Update