Hello there,
I’m an Angular developer that recently got into Ionic and I have some topics about the Ionic lifecycle implementation in combination with Angular.
The problems I’m describing here are not really noticed by the community, so I’m just wondering if I’m doing something horribly wrong or if the described points are valid to some degree.
Angular async pipes
Async pipes are only unsubscribed when the page is completely destroyed (e.g. with a navigate to root). Following this, they will only subscribe again when creating a completely new instance of the component. This could make them obsolete when trying to get new values each time a component gets initiated.
One “solution” I came around is to initialize the observable objects anew in the ionic lifecycle hooks to force the default Angular behavior. The disadvantage is that this will generate many waiting subscriptions in the background, even though they only wait for destruction.
OnDestroy in child components
Let’s say we have an Ionic page with a child component. The child component is a qr-code scanner with camera access from an external library. The camera stream is opened when navigating to the component. It is supposed to close again when navigating further.
The problem is that due to the Ionic route caching, the parent page is cached. Which leads to the OnDestroy lifecycle hook of the child not being called. The child now doesn’t know if it’s being used or not and doesn’t deactivate the camera stream when navigating to the next page. What follows is an always open camera stream.
A workaround here would be to use a condition that is only active when the parent page is open and put a *ngIf around the child component.
OnInit in child components
When having a child component that relies on values provided by the parent page, the lifecycle execution order can get difficult.
Default order : Parent ngOnInit → Child ngOnInit → Parent ionViewWillEnter → Parent ionViewDidEnter
If the parent sets something like resourceId in it’s ionViewWillEnter and provides it for their children, we can’t rely on that value in the children as it may not be set when the children’s ngOnInit is executed. I would also assume this could get even worse as the initialization of the child is executed before the parent is initialized.
Please note that the ionic lifecycle hooks in the child are not executed at all, as described here.
1 post - 1 participant