3

在 ionic 3 中有生命周期事件,例如ionViewWillEnterionViewWillLeave。但是在 Ionic 4 中,这个事件必须被 Angular 生命周期事件替换,比如ngOnInitngOnDestroy

在我的应用程序中,当用户进入或离开页面时,我需要实现一些给定的操作。例如,如果用户推送另一个页面(在 Ionic 4 中向前导航),应用程序应在推送新页面之前为当前页面执行 ionViewWillLeave。如果用户从推送的页面返回(在 Ionic 4 中向后导航),应用程序将为上一页执行 ionViewWillEnter。

我试图用 ngOnInit 和 ngOnDestroy 替换这个事件。但是这个事件每页只调用一次。例如,如果我路由到另一个页面(在 Ionic 4 中导航 root)并返回到第一页,则不会再次调用 ngOnInit 和 ngOnDestroy 事件的第一页。

每次用户进入或离开页面时如何调用事件?

4

2 回答 2

3

我犯了一个错误。文档说:

使用 V4,我们现在能够利用 Angular 提供的典型事件。但在某些情况下,您可能希望访问组件在其路由更改期间完成动画时触发的事件。在这种情况下,ionViewWillEnter、ionViewDidEnter、ionViewWillLeave 和 ionViewDidLeave 已从 V3 移植过来。使用这些事件与 Ionic 自己的动画系统协调动作。

ionViewDidLoad、ionViewCanLeave 和 ionViewCanEnter 等较旧的事件已被删除,应使用适当的 Angular 替代方案。 迁移指南 - 生命周期事件

于 2018-12-29T17:28:06.210 回答
0

**

Ionic 4 中的生命周期

**

Ionic 4 扩展了 Angular 的路由器导航
Ionic 4 引入了堆栈功能(就像在 Ionic 3 中一样)Ionic 4向Angular
添加了新的 Lifecycle Hooks: (如果它从堆栈中返回)ionViewWillLeave -如果页面将离开则触发(如果它保留在堆栈中)必须使用 ngOnDestroy





除了 ionViewDidLoad(因为它与 ngOnInit 相同)和两个 nav 守卫 Ionic 3 中的所有 Lifecycle 钩子仍然可用
ngOnInit 不会被触发,如果您在将其放入堆栈后返回页面默认情况下,如果您向前导航,当前页面保留在堆栈中,因此不会触发 ngOnDestroy。仅当您将新页面设置为 root (navController.navigateRoot())) 或向后导航时,它将从堆栈中删除
如果您想取消 Observables,只需执行 ionViewWillLeave 或 ionViewDidLeave 并在 ionViewWillEnter 或 ionViewDidEnter 中再次订阅
看看 DOM 检查器,在那里你可以看到你的页面仍然在堆栈中如果你使用 Angular 路由器,页面将添加到堆栈中。我推荐使用 Ionic Angular NavController 因为在这里你可以使用新的堆栈功能

于 2019-12-05T05:48:05.103 回答