Ionic Info
Ionic:
ionic (Ionic CLI) : 4.1.0
Ionic Framework : @ionic/angular 4.0.0-beta.2
@angular-devkit/core : 0.7.3
@angular-devkit/schematics : 0.7.3
@angular/cli : 6.1.3
@ionic/ng-toolkit : 1.0.6
@ionic/schematics-angular : 1.0.5
System:
NodeJS : v8.11.3
npm : 5.6.0
OS : Windows 10
Describe the Bug
Query params passed via NavController.goForward() are not appended to the URL.
Steps to Reproduce
test(): void {
this.navController.goForward(`/list`, true, { queryParams: { dummy: 4 }});
}
Expected Behavior
When clicking button, browser should navigate to "/list?dummy=4". Instead it navigates to "/list" without query param.
After some more testing, it seems like this might be an issue with the Angular router. Router.navigateByUrl() ignores NavigationExtras.queryParams. If NavController is using that under the hood it explains the problem.
Is NavController going to be supported going forward? It's not currently in the v4 beta docs. Should we be using Angular Router instead? If so, how do we handle the "direction" indication that Ionic uses for animations?
You can use Router to send a queryParams:
test(): void {
this.router.navigate('/list', { queryParams: { dummy: 4 }});
}
Sure, but then you lose the forward/back/root hints that Ionic (maybe) uses. Really I just want a clear answer from Ionic team on which we should be using going forward in an Ionic project.
+1
This is quite important.
Thanks for the thread. Also need to know what to use - how to have the back/forward functionality, if we are going to have that...
@MichaelMalony I tested it with beta.12 and it's working now. Could you test it and close this issue, if it works for you too?
Hello, I am using beta.12, and it works only if I use the URL as array:
this.router.navigate( ['/list'] , { queryParams: { dummy: 4 }}); } WORKS
this.router.navigate( '/list' , { queryParams: { dummy: 4 }}); } NO QUERY PARAMS
Yes, router navigation is a feature of Angular, not Ionic (and the NavController of Ionic is using Angular Router of course). I also did it with the array and this worked for me.
Closing since it looks more like a angular issue than a ionic one! thanks everyone for figuring this out!
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.
Most helpful comment
Sure, but then you lose the forward/back/root hints that Ionic (maybe) uses. Really I just want a clear answer from Ionic team on which we should be using going forward in an Ionic project.