Жизненные циклы компонентов при работе с Ionic

Роутинг в Ionic работает немного не так, как мы привыкли с обычным роутингом в Angular. Здесь страницы кешируются, и если мы перешли с «родительской» страницы на какой-то роут «дочерной» страницы (содержащий id) и вернулись назад, то в процессе этого не произойдет ngOnDestroy для родительской страницы при переходе и повторный ngOnInitn при возвращении на нее. Хотя для дочерной страницы во время возвращения ngOnDestroy выполнится.

Это может создавать проблемы, например, когда нужно обновить какие-то данные при возвращении на главную страницу, так как ngOnInitn не отработает снова. Поэтому Ionic есть свои 4 жизненных цикла.

Ionic Lifecycles

1. ionViewWillEnter — отрабатывает перед тем, как страница станет активной, отобразится и попадет в стек навигации. Полезный для загрузки данных, которые нужны для отображения страницы.
2. ionViewDidEnter — отрабатывает уже после того, как страница станет активной, отобразится и попадет в стек навигации. Полезный для визуализаций, анимаций и т.п.
3. ionViewWillLeave — отрабатывает, перед тем, как страница станет неактивной и удалится со стека.
4. ionViewDidLeave — отрабатывает, когда страница стала неактивной и удалилась. Полезный для отписок и подобных действий.

Как использовать

Эти цикли не надо имплементировать классу компоненты, а просто использовать правильные названия в коде и они автоматически отработают.

ionViewWillEnter() {
  console.log('ionicViewWillEnter');
}

ionViewDidEnter() {
  console.log('ionViewDidEnter');
}

ionViewWillLeave() {
  console.log('ionViewWillLeave');
}
ionViewDidLeave() {
  console.log('ionViewDidLeave');
}

Интересная особенность в порядке выполнения

Если мы переходим с одной страницы на другую, то сначала отработает ionViewWillLeave для первой страницы, потом ionicViewWillEnter и ionViewDidEnter для второй (новой), а уже лишь потом ionViewDidLeave для первой страницы.