Closed gogoout closed 4 years ago
@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" });
``
@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.
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
Did anyone find a solution to this? I am getting the same issue
Store the queryParams reference on a local variable inside constructor.
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()
)
+1 from 1383121
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.
@NickIliev Any updates on this?
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).
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?
The workaround is already discussed above, just store the query params in a local variable. Do not read it from ActivatedRoute every time.
@manojdcoder are you referring to this post , above?
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;
}
});
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.
I've created the PR #2062 so we can discuss implementation details there
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
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/home
), go Page2(/home/page2/whaterever?q=querys
)query.q: querys
params.id: whatever
/home/page3
)query.q: undefined
Is there any code involved?
https://play.nativescript.org/?template=play-ng&id=yEsgnU