Крюки жизненного цикла Ionic 4/Angular 7 вызываются только один раз на страницу
В ionic 3 были такие события жизненного цикла, как ionViewWillEnter а также ionViewWillLeave, Но в Ionic 4 это событие должно быть заменено событиями жизненного цикла Angular, такими как ngOnInit а также ngOnDestroy,
В моем приложении мне нужно реализовать некоторые заданные операции, когда пользователь входит или покидает страницу. Например, если пользователь нажмет другую страницу (перейдите вперед в Ionic 4), приложение выполнит ionViewWillLeave для текущей страницы перед тем, как будет нажата новая страница. Если пользователь вернулся с нажатой страницы (перейдите назад в Ionic 4), приложение выполнит ionViewWillEnter для предыдущей страницы.
Я пытался заменить эти события на ngOnInit и ngOnDestroy. Но эти события вызываются по одному разу на страницу. Например, если я перейду на другую страницу (перейду к корню в Ionic 4) и вернусь на первую страницу, на первой странице события ngOnInit и ngOnDestroy больше не будут вызываться.
Как я могу вызвать событие каждый раз, когда пользователь входит или покидает страницу?
3 ответа
Я допустил ошибку. В документации сказано:
С V4 мы теперь можем использовать типичные события, предоставляемые Angular. Но в некоторых случаях вам может потребоваться доступ к событиям, запускаемым, когда компонент завершает анимацию во время изменения маршрута. В этом случае ionViewWillEnter, ionViewDidEnter, ionViewWillLeave и ionViewDidLeave были перенесены из V3. Используйте эти события для координации действий с собственной системой анимации Ionic.
Более старые события, такие как ionViewDidLoad, ionViewCanLeave и ionViewCanEnter, были удалены, и следует использовать соответствующие угловые альтернативы. Руководство по миграции - события жизненного цикла
**
Жизненные циклы в Ionic 4
**
Ionic 4 расширяет возможности навигации по маршрутизатору в Angular
Ionic 4 представляет функциональность стека (как в Ionic 3).
Ionic 4 добавляет новые
хуки жизненного цикла в Angular: ionViewWillEnter - срабатывает при входе на страницу (также, если она возвращается из стека)
ionViewDidEnter - запускается после входа (также, если он вернулся из стека)
ionViewWillLeave - запускается, если страница покидает страницу (также, если она
остается в стеке) ionViewDidLeave - запускается после того, как страница была закрыта (также если она сохраняется в стеке)
ionViewWillUnload - В Angular не запускается, потому что здесь вы нужно использовать ngOnDestroy
За исключением ionViewDidLoad (потому что он такой же, как ngOnInit) и двух навигационных охранников, все хуки жизненного цикла из Ionic 3 по-прежнему доступны,
ngOnInit не будет запущен, если вы вернетесь на страницу после помещения ее в стек По умолчанию, если вы перейдете вперед, текущая страница остается в стеке, поэтому запуск ngOnDestroy не выполняется. Только если вы установите новую страницу как корневую (navController.navigateRoot()) или перейдете назад, она будет удалена из стека.
Если вы хотите отменить Observables, просто сделайте это ionViewWillLeave или ionViewDidLeave и снова подпишитесь на нее в ionViewWillEnter или ionViewDidEnter
Взгляните на инспектор DOM, там вы увидите, что ваша страница все еще находится в стеке. Если вы используете Angular Router, страницы будут добавлены в стек. Я рекомендую использовать Ionic Angular NavController, потому что здесь вы можете использовать новую функциональность стека
Я чувствую, что это проблема, которая вам нужна, вы можете обратиться к моему решению (ionic 6, angular 13).