Issue with Ionic 4 angular page events

1
votes

I have created a simple basic app using this tutorial and it seems very convincing and almost working. Few things for you to know before I explain the issue: I understand it is still in beta version so there might be possibilities of bugs and I am very new to ionic and angular

My issue is very simple but its very hard to explain, anyways I will try to put everything all together.

As explained earlier, I have used tutorial mentioned above to create the basic app with 3 pages login, register and dashboard. so I am assuming when a page in ionic loads the angular page hook event is always called, in my case it is ngOnInit and issue is with this event. Here is the steps to recreate my issue and help you understand where I am stuck

  1. Run the app and first time login page loads and ngOnInit of login page is successfully called.
  2. I navigate to register page and ngOnInit of register page is successfully called every time I navigate to this page from login.
  3. In register page there is back button which navigate to login page and when I navigate back to login ngOnInit of login page is NOT called. I want ngOnInit to be called at this point.
  4. Same thing happens when I navigate to Dashboard page and comes back to login page, login ngOnInit of login page is NOT called. Again I want ngOnInit to be called at this point.

I hope I have made my issue clear.

Now, I am not sure its a bug or not because I don't fully understand how angular works in terms of life cycle hooks and how ionic use angular to make it work.

I have 2 questions now:

  1. Is it a bug? if yes, can anybody please guide me to right direction so I can fix it(which is Impossible ;)) or I can at least notify guys at ionic to fix this.

  2. If its not a bug then please help me understand what am I missing here(an example or guidance would be appreciated), what should I do in order to get ngOnInit be called.

My Version of Ionic

>ionic info
Ionic:

   ionic (Ionic CLI)          : 4.1.2 (C:\Users\Me\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.12
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

Cordova:

   cordova (Cordova CLI) : 8.1.1 ([email protected])
   Cordova Platforms     : not available
   Cordova Plugins       : not available

System:

   Android SDK Tools : 26.1.1 (C:\Users\Me\AppData\Local\Android\Sdk)
   NodeJS            : v8.12.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.4.1
   OS                : Windows 10

Thank you in advance

EDIT: For better understanding of the issue I am trying to point out please see the screenshot below logs

3
angularionic-frameworkionic4

3 Answers

2
votes

Greeting,

NgOnInit will be triggered when specific page is created in memory ,

it will not triggered on return to the already created page. that is why your ng onlint is getting trigger very first time of the page created.

Why you are using Angular lifecyle event method? You can use Ionic lifecyle event for your case.

Ionic have it own set of lifecycle event methods.

Ex : in your case you can use 'ionViewWillEnter' event which will trigger every time you visit the page. You no need to destroy the page for this specific purpose

and other Ionic life cycle events are

  • ionViewDidLoad

  • ionViewWillEnter

  • ionViewDidEnter

  • ionViewWillLeave

  • ionViewDidLeave

  • ionViewWillUnload

0
votes

ngOnInit get's called on initialization of the component, and your component is already created when you go away and return to it.

In order to get OnInit called you need to destroy the component or use a different technique to get your script run when you return to the page.

The question would be what do you want to achieve?

0
votes

I did clearly understand your query/issue cause same problem I was facing for last couple of days. so finally I did achieve this problem ... so what I analyzed that you already may know that now ionic routing is complete following angular based pattern but here in ionic you should use ionic commands to navigate the page.

In your case if you have 3 page login , register and dash ... so when you stepping from login page to dashboard you should all follow below commands to navigate pages

 this.navCtrl.navigateRoot(['dashboard']);

and when you coming back 

this.navCtrl.navigateBack(['login']);

and when you forwarding from login to register page 

this.navCtrl.navigateForward(['dashboard']);

so remove traditional angular routing command for navigating pages and use those command I'm sure it will be work as same for me.

there still can be a helpful documentation on that from ionic team.

thx