Preserving the existing queryParams on back navigation

[gogoout]

If there is no issue for your problem, tell us about it

Going back remove the existing queryParams of that page which should be preserved as the params

Which platform(s) does your issue occur on?

iOS (Android untested, but suspect the behaviors will be the same), both emulator and device

Please, provide the following version numbers that your issue occurs with:

from playground

{
  "@angular/animations": "6.1.1",
  "@angular/common": "6.1.1",
  "@angular/compiler": "6.1.1",
  "@angular/core": "6.1.1",
  "@angular/forms": "6.1.1",
  "@angular/http": "6.1.1",
  "@angular/platform-browser": "6.1.1",
  "@angular/platform-browser-dynamic": "6.1.1",
  "@angular/router": "6.1.1",
  "kinvey-nativescript-sdk": "3.11.6",
  "nativescript-accelerometer": "2.0.1",
  "nativescript-angular": "6.1.0",
  "nativescript-background-http": "3.3.0",
  "nativescript-camera": "4.0.2",
  "nativescript-fresco": "4.0.0",
  "nativescript-geolocation": "4.3.0",
  "nativescript-intl": "3.0.0",
  "nativescript-iqkeyboardmanager": "1.3.0",
  "nativescript-social-share": "1.5.0",
  "nativescript-theme-core": "1.0.4",
  "nativescript-ui-autocomplete": "3.8.0",
  "nativescript-ui-calendar": "3.7.0",
  "nativescript-ui-chart": "3.7.0",
  "nativescript-ui-dataform": "3.6.2",
  "nativescript-ui-gauge": "3.6.0",
  "nativescript-ui-listview": "3.5.11",
  "nativescript-ui-sidedrawer": "4.2.1",
  "nativescript-vue": "1.3.1",
  "reflect-metadata": "0.1.12",
  "rxjs": "6.2.2",
  "tns-core-modules": "4.2.0",
  "zone.js": "0.8.26"
}

Please, tell us how to recreate the issue in as much detail as possible.

Describe the steps to reproduce it.
I've created a demo on playground which is a simple 3 pages app.
The 3 pages are Home(/home), Page2(/home/page2/:id?q) and Page3(/home/page3)
On Page2, I have code logging the params and queryParams

this.pageRoute.activatedRoute.pipe(
			switchMap((activatedRoute: ActivatedRoute) => activatedRoute.queryParams)
		).subscribe((params: Params) => {
			console.log('query.q: ', params.q);
			});


		this.pageRoute.activatedRoute.pipe(
			switchMap((activatedRoute: ActivatedRoute) => activatedRoute.params)
		).subscribe((params: Params) => {
			console.log('params.id: ', params.id);
		});

• On Home page (/home), go Page2(/home/page2/whaterever?q=querys)
• See console log query.q: querys params.id: whatever
• Go Page3(/home/page3)
• Go back to Page2
• See console log query.q: undefined

Is there any code involved?

https://play.nativescript.org/?template=play-ng&id=yEsgnU

[NickIliev]

@gogoout in Angular the queryParams are not preserved by default when subsequent navigation action is performed so this is expected behavior. Still we should be able to do it via queryParamsHandling (more info here and here) but setting the property to merge doesn't make any difference. Login this one as a feature and enchantment to the NativeScript's RouterExtensions

Feature explanation:

There is a config strategy to handle the query parameters for the next navigation. It uses the queryParamsHandling property that can be set to merge

this.router.navigate(['/view'], { queryParams: { page: 2 },  queryParamsHandling: "merge" });
``

[gogoout]

@NickIliev Thanks for the explanation, actually using queryParamsHandling together with nsRouterLink will working as expect. What I suggest though is just for goBack. Just a way to preserve the queryParams when going to the previous page.

[Burgov]

I'm running into this too. Using the back() functionality breaks query params, as it uses the params from the page you're going back from instead of the ones from the page you're going back to

[noordw]

Did anyone find a solution to this? I am getting the same issue

[manojdcoder]

Store the queryParams reference on a local variable inside constructor.

[gogoout]

I'm using bufferCount to match the queryParams

this.pageRoute.activatedRoute.pipe(
                switchMap((activatedRoute: ActivatedRoute) => activatedRoute.queryParams),
                startWith(null),
                // FIXME when going back, the old query will be cleared, track it here https://github.com/NativeScript/nativescript-angular/issues/1509
                bufferCount(2, 1),
                map(([oldQuery, newQuery]) => {
                    if (newQuery.q == null && newQuery.categoryId == null) {
                        return oldQuery;
                    }
                    else {
                        return newQuery;
                    }
                }),
                distinctUntilChanged()
            )

[NickIliev]

+1 from 1383121