Angular 8 how to use same route with different state from NavigationExtras?

Question

I'm using the Angular 8 and Ionic 4. I have a route for activity which is used for the creating(POST) or editing (PUT) base on onEditMode param provided in NavigationExtras state.

However after accessing the route for the second time it shows old outdated data - maybe Angular preserve reloading, but I would like to change so it will work like the Ionic 3 navigation - reload on every page change.

I would like to have an option to remove activities:name page for navigation stack so I can navigate to that page with new params and update the page view based on that params.

App routing module


{
    path: 'activities/:name',
    loadChildren: () =>
      import('./pages/activities/activities-routing.module').then(m => m.ActivitiesRoutingModule)
  }

And navigating function

let navigationExtras: NavigationExtras = {
      state: {
        date: this.reportDate,
        href: this.getCurrentUrlWithoutTabs(this.router.url),
        report: data,
        editMode: true,
        reportData: report,
        previewMode: preview
      },
      replaceUrl: true,
      skipLocationChange: true
    };
    let backHref = 'daily-overview'
    this.router.navigateByUrl(`/tabs/activities/${pageUrl}`, navigationExtras)
    .then(() => this.router.navigate([`/tabs/activities/${pageUrl}`]))

Gist => app-routing.module.ts https://gist.github.com/Verthon/a9432a502329e6d30b05b1d9db53d9dc

Gist => activity.page.ts https://gist.github.com/Verthon/59a107552b997f517e910b6fa83c03cd

Gist => gotToAcitivity() https://gist.github.com/Verthon/537fe2fb407997aa7e45fa7cb49467bb

In ionic, whenever you go to new route, its being constructed, and when you leave it it will be destroyed, so your problem is with navigationextras, they are still binding previous values and not being cleared after navigation back, so either clear your navaigation params on back navigation, or create a service to set the object inside it on navigation and on navigation to route return it with get, and when the route view will leave clear the service... — Mostafa Harb
I've tried with clearing the state like this. this.router.navigate(['daily-overview'], { replaceUrl: true }) and history.state changes to correct one however the page is still outdated. — Verthon
Am sure there is something incorrect but since i don't have the full code of two pages then all you need to do is when the second page view will leave, clear all the variables in page , like firstvariable = [] , second variable =0 , third variable = ''. And by that all the page should be forced to be refilled on each entry, and though if you need an accurite and good solution you need to provide the code of the 2 pages. — Mostafa Harb
And replace url will not make any changes in reality since in each navigation navigationextras are making the problem and not the routing strategy. Now its good it work but do you have other question? — Mostafa Harb
Thanks bro you two have a good day and i did post the answer. — Mostafa Harb

Mostafa Harb Mostafa Harb · Accepted Answer · 2020-04-07T09:45:53

In ionic, whenever you go to new route, its being constructed, and when you leave it it will be destroyed, so your problem is with navigationextras, they are still binding previous values and not being cleared after navigation back, so either clear your navaigation params on back navigation, or create a service to set the object inside it on navigation and on navigation to route return it with get, and when the route view will leave clear the service...

And i'm sure there is something incorrect but since i don't have the full code of two pages then all you need to do is when the second page view will leave, clear all the variables in page , like:

ionViewWillLeave() {
   firstvariable = [] ; 
   second variable =0 ;
   third variable = '';
   ...
}

And by that all the page should be forced to be refilled on each entry, and though if you need an accurite and good solution you need to provide the code of the 2 pages.

Angular 8 how to use same route with different state from NavigationExtras?

1 Answers