Ionic 2 / Angular 2 hook component lifecycle
I have a component on a page that I need to connect from every time the page is moved. It contains a mapbox and I found that it does not resize correctly if the user logs in with the registration page and pulls out the keyboard and then returns to the map page and the div div is smaller because the user was opening the keyboard on their Phone. Hope this makes sense?
I've tried all of the hooks listed here https://angular.io/guide/lifecycle-hooks , but none of them fire every time the page is moved.
Any help would be great.
source to share
Try:, ionViewDidEnter()
together with @ViewChild
. With, @ViewChild
you can access the component.
From the Ionic docs :
" ionViewDidEnter()
will fire when the page is fully entered and becomes the active page. This event will fire, whether it is the first load or a cached page."
This will give you the ability to call a function on the component every time the page is navigated.
parent TS page:
@Component({
selector: 'parent-page',
templateURL: 'parent-page.html'
})
export class ParentPage{
@ViewChild('myComponent') myComponent;
constructor(){}
ionViewDidEnter(){
this.myComponent.someFunc();
}
...
}
Parent page HTML pages:
<ion-content>
...
<child-component #myComponent></child-component>
...
</ion-content>
source to share