搜索文档 /

betway东盟体育app离子页生命周期

本指南涵盖了页面生命周期如何在具有离子和角度构建的应用程序中运作。betway东盟体育app

betway东盟体育app离子生命周期活动演示

角生命周期事件

betway东盟体育app离子包含Angular提供的生命周期事件。您最多使用的两个角度事件是:

事件名称 描述
ngoninit 在组件初始化期间触发了一次。该事件可用于初始化本地成员,并将呼叫拨入只需要一次的服务。
ngondestroy 在角度摧毁视图之前就开火。对于清理,例如从可观察物中取消订阅。

有关角度组件生命周期活动的更多信息,请访问他们的 组件生命周期文档

使用的组件 离子-NAV 或者 离子旋律释放 不应该使用 Onpush 更改检测策略。这样做将防止生命周期钩 ngoninit 从射击。此外,异步状态变化可能无法正确渲染。

betway东盟体育app离子页面事件

除了角度生命周期事件外,离子角还提供了一些您可以使用的其他事件:betway东盟体育app

事件名称 描述
Ionviewwillenter 当组件路由即将动画视图时,被触发。
IonviewDidenter 当组件路由完成动画时,被解雇。
IonviewWillleave 当组件路由即将到达动画时,被解雇。
IonviewDidleave 当组件路由完成动画时,被解雇。

和...之间的不同 Ionviewwillenter IonviewDidenter 是他们开火的时候。前者起火之后 ngoninit 但是在页面过渡开始之前,过渡结束后的后者直接。

为了 IonviewWillleave IonviewDidleave ,,,, IonviewWillleave 在从当前页面开始过渡之前直接被调用,并且 IonviewDidleave 直到新页面成功过渡到新页面之后,才被打来电话 IonviewDidenter 火)。

betway东盟体育app离子生命周期活动演示

离子如何betway东盟体育app处理页面的寿命

betway东盟体育app离子有其路由器插座,称为 。这个插座扩展了Angular的 <路由器输出 /> 具有一些其他功能,可以为移动设备提供更好的体验。

当应用程序包裹时 ,离betway东盟体育app子对待导航的方式有所不同。当您导航到新页面时,Ionic将将旧页面保存在现有的DOM中,但请betway东盟体育app将其从视图中隐藏并过渡新页面。我们这样做的原因是两个方面:

1)我们可以维护旧页面的状态(屏幕上的数据,滚动位置等。)
2)我们可以提供更平稳的过渡到页面,因为它已经存在并且不需要重新创建。

例如,在“弹出”时,仅通过按UI或浏览器返回按钮时将页面从DOM中删除。

由于这种特殊处理, ngoninit ngondestroy 当您通常认为他们应该这样做时,方法可能不会发射。

ngoninit 每次新鲜创建页面时,只会开火,但不会在导航回页面时发射。例如,在选项卡接口中的每个页面之间导航只会调用每个页面的 ngoninit 方法一次,但不进行后续访问。 ngondestroy 只有在“弹出”页面时才开火。

路线守卫

在离子betway东盟体育app3中,还有几种其他生命周期方法可用于控制何时可以输入页面( IonviewCanenter ) 走了 ( IonviewCanleave )。这些可用于保护页面免受未经授权的用户的影响,并在您不想离开时将用户保留在页面上(例如在表格填充期间)。

在离子4中除去了这些方法,以使用Angular的路线护罩。betway东盟体育app

路线警卫有助于确定是否可以针对路线采取特定的动作。它们是实现特定接口的类。这 引起活力 糖尿病 接口可用于实现与删除事件的相同类型的逻辑 IonviewCanenter IonviewCanleave 做过。


             @
              注射
              ((
              
             
              出口
             
              班级
             
              Authguard
             
              工具
             
              引起活力
             
              {
             
              构造函数
              ((
               私人的
              Authservice
               
              Authservice
              
             
              {
              }
             
              引起活力
              ((
              路线
               
              ActivatedRoutesnapshot
               ,,,,
              状态
               
              RouterStatesNapshot
              
             
              {
             
              返回
             
              这个
              
             Authservice
              
              术语化
              ((
              
              ;
             
              }
             
              }
复制 复制

要使用此护罩,请将其添加到路由定义中的适当参数中:


              {
             小路
              
             
              “设置”
              ,,,,
             引起活力
              
             
              [[
             Authguard
              这是给予的
              ,,,,
             负载童年
              
             
              '...'
              ,,,,
             
              }
复制 复制

有关如何使用路线警卫的更多信息,请转到Angular的 路由器文档

每个生命周期方法的指导

以下是有关每个生命周期事件使用案例的一些技巧。

  • ngoninit - 初始化您的组件和加载数据中的数据,这些数据不需要在随后的每个访问中刷新。
  • Ionviewwillenter - 自从 Ionviewwillenter 每次将视图导航到(无论是否初始化)时,都会称呼它,这是从服务加载数据的好方法。但是,如果您的数据在动画期间返回,它可能会启动大量的DOM操作,这可能会导致一些Janky动画。
  • IonviewDidenter - 如果您看到使用的性能问题 Ionviewwillenter 加载数据时,您可以进行数据调用 IonviewDidenter 反而。但是,在用户可见页面之后,此事件才会发射,因此您可能需要使用加载指示器或骨架屏幕,因此在过渡完成后,内容不会在非自然的情况下闪烁。
  • IonviewWillleave - 可用于清理,例如从可观察物中取消订阅。自从 ngondestroy 从当前页面导航时可能不会发射,如果您不希望它在屏幕不在查看时,请将清理代码放在此处。
  • IonviewDidleave - 当此事件启动时,您就会知道新页面已经完全过渡,因此,当视图可见时,您通常不会执行任何逻辑。
  • ngondestroy - 您不想清理的页面清理逻辑 IonviewWillleave
以前的
您的第一个应用程序
下一个
导航
Baidu