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

Question

在 ionic 3 中有生命周期事件，如ionViewWillEnter和ionViewWillLeave 。 但是在 Ionic 4 中，这个事件必须被 Angular 生命周期事件替换，比如ngOnInit和ngOnDestroy 。

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

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

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

Answer 1

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

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

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

Answer 2

**

Ionic 4 中的生命周期

**

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