Ionic 4/Angular 7 生命周期钩子每页只调用一次

Question

在 ionic 3 中有生命周期事件，例如 ionViewWillEnter 和 ionViewWillLeave。但在 Ionic 4 中，此事件必须由 Angular 生命周期事件替换，例如 ngOnInit 和 ngOnDestroy。

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

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

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

Answer 1

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

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

较早的事件，例如 ionViewDidLoad、ionViewCanLeave 和 ionViewCanEnter 已被删除，应该使用适当的 Angular 替代品。 Migration Guide - Lifecycle Events

Answer 2

**

Ionic 4 中的生命周期

**

Ionic 4 扩展了 Angular 的路由器导航
Ionic 4 引入了堆栈功能（如在 Ionic 3 中）
Ionic 4 向 Angular 添加了新的生命周期挂钩：
ionViewWillEnter — 进入页面时触发（也如果它从堆栈返回）
ionViewDidEnter - 进入后触发（如果它从堆栈返回）
ionViewWillLeave - 如果页面将离开则触发（如果它保留在堆栈中）
ionViewDidLeave — 在页面离开后触发（如果它保留在堆栈中）
ionViewWillUnload — 在 Angular 中不会触发，因为在这里你必须使用 ngOnDestroy
除了 ionViewDidLoad（因为它与 ngOnInit 相同）和两个 nav 守卫之外，Ionic 3 中的所有 Lifecycle 钩子仍然可用
ngOnInit 不会被触发，如果你把它放入堆栈后返回一个页面 默认情况下，如果您向前导航，当前页面会保留在堆栈中，因此不会触发 ngOnDestroy。仅当您将新页面设置为根 (navController.navigateRoot())) 或向后导航时，它将从堆栈中删除
如果您想取消 Observables，只需执行 ionViewWillLeave 或 ionViewDidLeave 并在 ionViewWillEnter 或 ionViewDidEnter
中再次订阅它 查看 DOM 检查器，您可以看到您的页面仍在堆栈中 如果您使用 Angular 路由器，页面将添加到堆栈中。我推荐使用 Ionic Angular NavController，因为在这里您可以使用新的堆栈功能