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

[ditoglez]

I am having a similar issue but with params. Navigating back to the previous screen uses the params from the current screen in the viewport.

[alexxxo1985]

@NickIliev Any updates on this?

[Eonfuzz]

Similar here, I have a component that can navigate to itself (but with a different url) and need the queryParams to capture the user's flow state (ie, calling back instead of navigating and creating the same component again).

[BasyaLipman]

Same issue here. I have a component that can navigate to itself. All is well when moving forward but when user navigates back with back button, the component does not go back to its previous state of the query params.

What have people been doing for a workaround?

[manojdcoder]

The workaround is already discussed above, just store the query params in a local variable. Do not read it from ActivatedRoute every time.

[BasyaLipman]

@manojdcoder are you referring to this post , above?

[RijwanKassar]

I am having a similar issue and fix it by using this code . Because this.ProfileDetail value is not lost until refresh the page .

constructor( )
 {
    this.route.queryParams.subscribe(params => {
      if (params["data"] != undefined) 
      {
           //When you come first time
           this.ProfileDetail = JSON.parse(params["data"]);
      }
      else 
     {
        // when reverse back. 
        this.ProfileDetail = this.ProfileDetail;
      }
    });

[edusperoni]

I've been researching this and I think I found the issue.

We're internally storing the state as UrlSegmentGroups, which does not contains query parameters.

NSLocationStrategy is not properly implementing a complete history. I've started work on this branch: https://github.com/edusperoni/nativescript-angular/tree/location-strategy

I added a queryParams parameter and stored them with the state. It seemed to work on my demo, but we probably have to test with multiple router outlets and modals.

[edusperoni]

I've created the PR #2062 so we can discuss implementation details there