Ionic-v4 - Force page refresh/reload on router.navigate

Ionic Framework
1

How can I force a page refresh/reload after a router.navigate ?
I asking because ngOnInit works only once and if I have to return to a previous page using router.navigate the displayed data are not updated.

I have also tried with all Angular life cycle hooks but I can’t find the best way to to that, I have also tried with {reload: true} without success.

1 Like
2

you can use ionViewWillEnter(){} method and call your function within it

6 Likes
3

ionViewWillEnter() Is not available on Ionic 4 angular type projects. (
ionic start myApp --type=angular)

From v4 guide:

Lifecycle Events

Some of the Ionic lifecycle events are equivalent to Angular lifecycle hooks. For example, ionViewDidLoad() fills the same role as the Angular OnInit lifecycle hook ( ngOnInit() ). In such cases, use the Angular lifecycle hook.

OnInit still runing only once and the other lifecycle events (like ngAfterContentInit, ngAfterContentChecked…) are fired a lot of times after router navigate.

The problem persist.
What I Trying to do? I have 3 pages:

A: Panel with statistics
B: List with all records
C: New record page

From A to B data is loaded correctly after router.navigate
but From C returning to B the data list is not updating.

In B page I have on OnInit a function that get data from database, but it only works when I load B page at first time (from A to B), not after create a new record on page C, on Page C After save the new record I have a router.navigate that redirects to B page again, it’s very simple but it’s nor working like the expected.

3 Likes
4

See if this will work for you.

I believe that using Resolver would function the same as ionViewWillEnter

1 Like
5

I would come at this from a different angle. Instead of actually doing data updating in ngOnInit, instead subscribe to an Observable that always provides the most recent data. Correspondingly, unsubscribe in ngOnDestroy. That way, you don’t ever have to care about “forcing” anything.

2 Likes
8

Now I’m using both methods to do specific things. (Observable and Router Resolver)

9

Thank you Daniel, now it is my preferred method to initialize the views.

10

I just found out that ionic’s lifecycle events are still around except for canenter and canleave

11

ionViewWillEnter and co. still exists in v4 (https://github.com/ionic-team/ionic/search?q=ionViewWillEnter&unscoped_q=ionViewWillEnter)

ionViewDidLoad doesn’t exist anymore and has to be replaced with ngOnInit

1 Like
12

call to ::
this.ngOnInit()

1 Like
13

I have an idea to do that.
i have create a param for that page which i want to referesh.
and i have redirected back to page with a random param. and it treated it as a new page.
{

path: 'clubhome/:referesh',

loadChildren: () => import('./clubhome/clubhome.module').then( m => m.ClubhomePageModule)

},

this.navCtrl.navigateForward(‘clubhome/1234234’);
this.navCtrl.navigateForward(‘clubhome/12342’);
this.navCtrl.navigateForward('clubhome/12342343243
');

3 Likes
14

The solution from peerodeveloper solved my problem. I had an infinity scroll user list with a filter. When I opened the filter window, the filter should be applied to the user list immediately without the user having to reload the page. With this solution it works.