Ionic 4角度页面事件的问题

时间:2018-10-03 11:52:42

标签: angular ionic-framework ionic4

我使用this教程创建了一个简单的基本应用程序,它看起来非常有说服力并且几乎可以正常工作。在解释这个问题之前,您需要了解的几件事:我知道它仍处于beta版本,因此可能存在错误,并且对离子和角度传感器我还是很陌生

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

如前所述,我已经使用上面提到的教程来创建具有3页登录,注册和仪表板的基本应用程序。因此,我假设当离子加载页面时,总是会调用角度页面挂钩事件,在我的情况下,它是ngOnInit且此事件是问题所在。这是重现我的问题并帮助您了解我所困地方的步骤

  1. 运行该应用程序,并首次加载登录页面,并成功调用登录页面的ngOnInit。
  2. 我导航到注册页面,每次我从登录名导航到该页面时都会成功调用注册页面的ngOnInit。
  3. 在注册页面中,有一个后退按钮,可导航到登录页面,当我导航回登录时,会不调用登录页面的ngOnInit。我希望此时调用ngOnInit。
  4. 导航到“仪表板”页面并返回登录页面时,发生了同样的事情,登录页面的登录ngOnInit被调用。我再次希望此时调用ngOnInit。

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

现在,我不确定它是否是一个错误,因为我不完全了解角度在生命周期挂钩方面的工作方式以及离子如何使用角度使它工作。

我现在有2个问题:

  1. 这是一个错误吗?如果是,有人可以指导我正确的方向,以便我进行修复(这是不可能的;)),也可以至少通知ionic的人员进行修复。

  2. 如果不是bug,请帮助我了解我在这里缺少什么(示例或指南将不胜感激),应该怎么做才能调用ngOnInit。


我的离子版本

>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

提前谢谢


编辑: 为了更好地理解我要指出的问题,请参见下面的屏幕截图 logs

3 个答案:

答案 0 :(得分:2)

问候

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

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

为什么要使用Angular lifecyle事件方法?您可以为案例使用Ionic lifecyle事件。

Ionic具有自己的生命周期事件方法集。

Ex:根据您的情况,您可以使用“ ionViewWillEnter ”事件,该事件将在您每次访问该页面时触发。您无需为此目的破坏页面

其他离子生命周期事件是

  • ionViewDidLoad
  • ionViewWillEnter

  • ionViewDidEnter

  • ionViewWillLeave

  • ionViewDidLeave

  • ionViewWillUnload

答案 1 :(得分:0)

在组件初始化时会调用ngOnInit get,并且当您离开并返回该组件时已经创建了该组件。

要调用OnInit,您需要销毁组件或使用其他技术来使您的脚本在返回页面时运行。

问题是您想要实现什么?

答案 2 :(得分:0)

我确实清楚地了解您的查询/问题导致了最近几天遇到的相同问题。所以最后我确实解决了这个问题...所以我分析了一下,您可能已经知道,现在离子导向已经按照基于角度的模式完成了,但是在ionic中,您应该使用ionic命令导航页面。

在您的情况下,如果您具有3页登录,注册和破折号...,那么当您从登录页面转到仪表板时,都应遵循以下命令导航页面

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

以及您回来时

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

,以及从登录名转到注册页面时

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

因此,请删除用于导航页面的传统角度路由命令,并使用这些命令,我​​相信它对我来说将是相同的。

还有一些有关离子团队的有用文档。

thx