Ionic: ionViewDidEnter does not fire for subcomponents of a page


#1

Please see http://stackoverflow.com/questions/39943840/cant-fire-lifecycle-events-on-subcomponent/42190075?noredirect=1#comment71542987_42190075


#2

please post you code so that we can help you… at least it provides a starting point to analyze the issue


#3

Ionic lifecycle hooks track behavior of the NavController. A component embedded in your page isn’t going to cause the NavController to push or pop. Perhaps you want behavior that is tracked by the Angular 2 hooks. However, the Angular hooks don’t behave the same as they do in an Angular cli or NativeScript app, because Ionic caches more pages, so documentation about those lifecycle hooks isn’t always reliable. You have a lot of confidence in the perfection of the world to think this question can be answered without referring to specific code.


#4

Here’s the gist:

locomotive.html:

<ion-header>
    ..
</ion-header>
<db-carriage></db-carriage>
    ..
<button ion-button class='next'>
    ..
</button>

locomotive.js:
@Component({
selector: ‘db-locomotive’,

})
export class DBLocomotive {
ionViewDidEnter(){
// fires on navCtrl.push(DBLocomotive)
}

}
dbCarriage.js:
@Component({
selector: ‘db-carriage’,

}
export class DBCarriage {
ngOnInit() {
// fires on navCtrl.push(DBLocomotive)
}
ionViewDidEnter(){
// Logic here doesn’t get fired :frowning:
}
}

In order to trigger DBCarriage logic i’m thinking that i’m going to have to limit the page stack to a height of 1, to ensure that at least the ngOnInit event on the DBCarriage fires by forward and backware navigation and then i can move the logic here from the ionViewDidEnter.


#6

ngOnInit of your component doesn’t fire on navCtrl.push of your page. That’s just a coincidence. It fires every time the component is initialized, which may or may not happen when the page is first rendered, depending on other things you are doing.

You don’t describe what kind of logic you are trying to make happen, so this version of your question isn’t better than the previous version. You didn’t include exactly what is needed to diagnose the problem, so you might look at improving your question-asking skills in the future. But here’s some general pointers:

Any synchronous and fully internal component initialization goes in the constructor. Any asynchronous initialization that involves communication with other code modules goes in ngOnInit. Anything you want to fire one time after the component is rendered can go in ngAfterViewInit. And avoid relying on ngOnDestroy when programming in the Ionic framework. Pages don’t get destroyed often.


#7

And for the case of any logic you want to fire when page/component returns to the top of the Stack or rather when page is again the active page? I’ve experimented with the angular2 ngAfterViewInit and ngAfterContentInit, but as you suggest in this case a one-time trigger is to be expected…


#8

Rendering is decoupled from entry. Your component isn’t going to know when entry occurs; that is listened to at the page level. Suppose your component is a secure form – someone enters their cc info, and you don’t want that visible if a user goes forward and then hits the back button to return to the form page. You can do that by sending refreshed info to the component whenever you’re about to enter the page.


#9

Hi!
@ryanki10 Maybe, you can find some help in my answer to a similar question here. The short answer is that you can tie parent lifecycle events with inner components using Angular’s @ViewChild decorator.

Hope it helps,
Xavi


#10

Have you found the solution for this issue?


#11

Yes one workaround is to pass info from the parent’s ionViewDidEnter event handler to the child component using the HTML bound properties.


#12

Can you explain that work around