How to fire ngOnInit on page

i’m using ionic 5 and angular 9. And using angular Router to move between pages. But this leads me to a problem, in ionic the ngOnInit is not called again. I know that there is a NavController in ionic and the lifecycle events tha it throws… But i need to know if there is a way to use angular Router and have the ngOnInit be called again.

some code to ilustrate…

page 1:

goToPerson(person){
this.router.navigateByUrl("/personProfile", {state:person, replaceUrl:true});
}

page 2:

ngOnInit() {
this.person = this.router.getCurrentNavigation().extras.state as Person;

if(this.person.photo != null){
  this.photoPerfil = environment.img_url + this.person.photo.fileName;
}else{
  this.photoPerfil = "../../../assets/images/person.png";
}
}
1 Like

I have the same issue

Please read through the docs on the ionic life-cycle hooks

Ionic’s router caches components, so ngOnInit will only run once.
You need to use the lifecycle hooks instead.

is using ionViewWillEnter will resole this problem ? because it’s called every time the view is navigated

Try it out and test it.

1 Like

extras in ionViewWillEnter are always null (Cannot read property ‘extras’ of null),
In constructor and ngOnInit I receive the data,
so using ionViewWillEnter will not work

Can you please provide a demo app posted to github? otherwise we can’t know for sure

sure:

Im not even sure what I am supposed to be looking at with your example.

You have this in your app component

Which seems odd, especially when there’s this in the home component

Seems like a lot of noise

At the risk of sounding like a broken record, IMHO lifecycle event handlers should be focused entirely on the internals of a component: setting things up and tearing things down. If there is some fluctuating data source outside the component, subscribe to it and react to changes in it when those changes happen. Don’t involve lifecycle events in that calculation. I would write this like so.

For those how have the same issue i managed to do the job this way:

On Page 1 call the page 2 sending the data on the state parameter of the navigationExtras

page 1:

goToPerson(person){
this.router.navigateByUrl("/personProfile", {state:person, replaceUrl:true});
}

On Page 2 subscribing to the queryParams of the activated Route and reading the state parameter of the navigationExtras and using the ionViewWillEnter instead of ngOnInit
page 2:

constructor(private route: ActivatedRoute,private router: Router) {
this.route.queryParams.subscribe(params => {
if (this.router.getCurrentNavigation().extras.state) {
this.person = this.router.getCurrentNavigation().extras.state as Person;
}
});
}

ionViewWillEnter() {
this.person = this.router.getCurrentNavigation().extras.state as Person;

if(this.person.photo != null){
  this.photoPerfil = environment.img_url + this.person.photo.fileName;
}else{
  this.photoPerfil = "../../../assets/images/person.png";
}

}

Sorry that was for other test purpose , forget to delete it ( was doing this to create a scenario as if the user sometimes is connected and other times he needs to connect then go to profile)

I delete that piece of mess , still i got null in ionViewWillEnter

I found this in stackoverflow (https://stackoverflow.com/questions/54891110/router-getcurrentnavigation-always-returns-null/54891361)

You’re calling the method getCurrentNavigation too late. The navigation has finished.

You need call the getCurrentNavigation method inside of the constructor:

constructor(private router: Router) {
    this.name = this.router.getCurrentNavigation().extras.state.example;
}

Or if you want you can access the navigation in ngOnInit

Ionic Page Life Cycle

Begin navigation --> ngOnInit --> begin page transition (I think the navigation is finished here that's what cause the problem if i'm not wrong ) --> ionViewwillEnter