Ionic 4 角度页面事件的问题

Posted 2023-03-13

【中文标题】Ionic 4 角度页面事件的问题

【英文标题】：Issue with Ionic 4 angular page events

【发布时间】：2019-03-08 15:35:23

【问题描述】：

我使用this 教程创建了一个简单的基本应用程序，它看起来非常有说服力并且几乎可以工作。在我解释问题之前，您需要了解的几件事：我知道它仍处于测试版，因此可能存在错误，而且我对 ionic 和 angular 非常陌生

我的问题很简单，但很难解释，无论如何我会尝试将所有内容放在一起。

如前所述，我使用上面提到的教程创建了具有 3 个页面登录、注册和仪表板的基本应用程序。所以我假设当离子加载页面时总是调用角度页面挂钩事件，在我的情况下它是 ngOnInit 并且问题出在此事件上。以下是重现我的问题并帮助您了解我卡在哪里的步骤

运行应用程序，首次加载登录页面，成功调用登录页面的ngOnInit。 我导航到注册页面，每次我从登录导航到此页面时，都会成功调用注册页面的 ngOnInit。 在注册页面中有返回按钮导航到登录页面，当我导航返回登录页面时，登录页面的 ngOnInit 被 NOT 调用。我希望此时调用 ngOnInit。 当我导航到仪表板页面并返回登录页面时，也会发生同样的事情，登录页面的登录 ngOnInit 被 NOT 调用。我再次希望此时调用 ngOnInit。

我希望我已经把我的问题说清楚了。

现在，我不确定它是否是一个错误，因为我不完全了解 Angular 在生命周期挂钩方面的工作原理以及 ionic 如何使用 Angular 使其工作。

我现在有 2 个问题：

这是一个错误吗？如果是的话，任何人都可以指导我正确的方向，以便我可以解决它（这是不可能的;））或者我至少可以通知 ionic 的人来解决这个问题。

如果它不是错误，那么请帮助我了解我在这里缺少什么（希望提供示例或指导），我应该怎么做才能调用 ngOnInit。

---

我的 Ionic 版本

>ionic info
Ionic:

   ionic (Ionic CLI)          : 4.1.2 (C:\Users\Me\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.12
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

Cordova:

   cordova (Cordova CLI) : 8.1.1 (cordova-lib@8.1.0)
   Cordova Platforms     : not available
   Cordova Plugins       : not available

System:

   android SDK Tools : 26.1.1 (C:\Users\Me\AppData\Local\Android\Sdk)
   NodeJS            : v8.12.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.4.1
   OS                : Windows 10

提前谢谢你

---

编辑： 为了更好地理解我要指出的问题，请参阅下面的屏幕截图

【参考方案1】：

我确实清楚地了解您的查询/问题导致我在过去几天面临同样的问题。所以最后我确实解决了这个问题......所以我分析过你可能已经知道现在离子路由已经按照基于角度的模式完成了，但是在 ionic 中你应该使用 ionic 命令来导航页面。

如果你有 3 个页面登录，注册和破折号......所以当你从登录页面步进到仪表板时，你应该按照以下命令导航页面

 this.navCtrl.navigateRoot(['dashboard']);

当你回来时

this.navCtrl.navigateBack(['login']);

当你从登录页面转发到注册页面时

this.navCtrl.navigateForward(['dashboard']);

所以删除用于导航页面的传统角度路由命令并使用这些命令，我​​相信它对我来说将是一样的。

离子团队仍然可以提供有用的文档。

谢谢

【参考方案2】：

您好，

在内存中创建特定页面时会触发NgOnInit，

它不会在返回到已创建的页面时触发。 这就是为什么您的 ng onlint 在第一次创建页面时就被触发的原因。

为什么要使用 Angular 生命周期事件方法？您可以为您的案例使用 Ionic 生命周期事件。

Ionic 有它自己的一组生命周期事件方法。

例如：在您的情况下，您可以使用 'ionViewWillEnter' 事件，该事件将在您每次访问页面时触发。您无需为此特定目的销毁页面

和其他Ionic生命周期事件是

ionViewDidLoad

ionViewWillEnter

ionViewDidEnter

ionViewWillLeave

ionViewDidLeave

ionViewWillUnload

【讨论】：

首先，我按照link 的指导使用它，其次，正如您所说返回到已创建的页面时不会触发 那么为什么 ngOnInit 是被要求访问其他页面？我正在重温。

好的，您对 ionViewWillEnter 的看法是正确的，但请检查更新后的答案和屏幕截图，以便您更好地理解我的担忧。

你在使用应用延迟加载？

我怀疑当您的登录页面在根页面模块页面中时，其他两个页面都是应用程序延迟加载中的不同子模块页面。因此，当您返回登录页面时，您的子模块会被破坏。

还有物理后退按钮在浏览器捕获堆栈中弹出当前页面。所以树流被破坏了，所以重新出现创建新页面。

【参考方案3】：

在组件初始化时调用ngOnInit get，当你离开并返回时，你的组件已经创建。

为了调用 OnInit，您需要销毁组件或使用不同的技术在您返回页面时让脚本运行。

问题是你想要达到什么目标？

【讨论】：

但是注册页面和仪表板页面也应该这样，对吧？相反，每次我导航到这些页面时都会为它们调用 ngOnInit，我并没有明确地破坏注册和/或仪表板页面的组件。

我已经用截图更新了我的答案，所以你可以更好地理解我的担忧。