搜索文档 /

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

本指南涵盖了页面生命周期在使用Ionic和Angular构建的应用程序中是如何工作的。betway东盟体育app

betway东盟体育app离子生命周期事件演示

Angular生命周期事件

betway东盟体育appIonic包含了Angular提供的生命周期事件。你会发现使用最多的两个Angular事件是:

事件名称 描述
ngOnInit 在组件初始化期间触发一次。此事件可用于初始化本地成员,并对只需执行一次的服务进行调用。
ngOnDestroy 在Angular销毁视图之前触发。用于清除,如取消对可观察对象的订阅。

有关Angular组件生命周期事件的更多信息,请访问它们的 组件生命周期的文档

使用的组件 ion-nav ion-router-outlet 不应使用 OnPush 变化检测策略。这样做将防止生命周期钩子,例如 ngOnInit 从发射。此外,异步状态更改可能无法正确呈现。

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

除了Angular的生命周期事件,Ionic Angular还提供了一些你可以使用的额外事件betway东盟体育app:

事件名称 描述
ionViewWillEnter 当组件路由要进入视图时触发。
ionViewDidEnter 当组件路由到已完成动画时触发。
ionViewWillLeave 当组件路由即将动画时触发。
ionViewDidLeave 当组件路由到已完成动画时触发。

之间的区别 ionViewWillEnter ionViewDidEnter 就是他们开火的时候。前者在之后就被点燃了 ngOnInit 但在页面转换开始之前,而后者在转换结束后直接。

ionViewWillLeave ionViewDidLeave ionViewWillLeave 在从当前页开始转换之前直接调用,并且 ionViewDidLeave 在新页面成功转换到(在新页面之后 ionViewDidEnter 火灾)。

betway东盟体育app离子生命周期事件演示

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

betway东盟体育app爱奥尼亚有一个路由器出口,叫做 < ion-router-outlet / > .这个出口扩展了Angular的出口 < router-outlet / > 通过一些附加功能,为移动设备提供更好的体验。

当一个应用程序被包装进来 < ion-router-outlet / > 爱奥betway东盟体育app尼亚对导航的处理有点不同。当您导航到新页面时,Ionic会将旧页面保留在现有的DOM中,但将betway东盟体育app其隐藏在您的视图中,并转换新页面。我们这样做的原因有两个:

1)我们可以保持旧页面的状态(屏幕上的数据,滚动位置等)
2)我们可以提供一个更流畅的过渡到页面,因为它已经在那里,不需要重新创建。

页面只有在“弹出”时才会从DOM中移除,例如,通过按UI中的后退按钮或浏览器中的后退按钮。

由于这种特殊处理, ngOnInit ngOnDestroy 方法可能不会在您通常认为它们应该触发的时候触发。

ngOnInit 只在页面每次新创建时触发,而不是在导航回页面时触发。例如,在标签界面中在每个页面之间导航只会调用每个页面的 ngOnInit 方法一次,但不要在以后的访问中。 ngOnDestroy 只有当页面“弹出”时才会触发。

警卫路线

在iobetway东盟体育appno3中,有一些额外的生命周期方法,它们有助于控制何时可以进入页面( ionViewCanEnter )及左( ionViewCanLeave ).这些可以用来保护页面不受未授权用户的侵犯,并在您不想让用户离开页面时(比如在填写表单时)将用户留在页面上。

在ion4中,为了使用Angular的路由守卫,这些方法被删betway东盟体育app除了。

路线守卫帮助确定是否可以对路线采取特定的行动。它们是实现某个接口的类。的 CanActivate CanDeactivate 接口可用于实现与删除事件相同类型的逻辑 ionViewCanEnter ionViewCanLeave 所做的。


             
              可注射的
              
              
             
              出口
             
              
             
              AuthGuard
             
              实现了
             
              CanActivate
             
              
             
              构造函数
              
               私人
              authService
               
              AuthService
              
             
              
              
             
              canActivate
              
              路线
               
              ActivatedRouteSnapshot
               
              状态
               
              RouterStateSnapshot
              
             
              
             
              返回
             
              
              
             authService
              
              isAuthenticated
              
              
              
             
              
             
              
复制 复制

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


              
             路径
              
             
              “设置”
              
             canActivate
              
             
              
             AuthGuard
              
              
             loadChildren
              
             
              “……”
              
             
              
复制 复制

有关如何使用路由保护的更多信息,请访问Angular的 路由器的文档

每个生命周期方法的指导

下面是关于每个生命周期事件的用例的一些提示。

  • ngOnInit 初始化您的组件,并从不需要在每次后续访问时刷新的服务加载数据。
  • ionViewWillEnter ——因为 ionViewWillEnter 在每次导航到视图时调用(无论是否初始化),它是从服务加载数据的好方法。但是,如果您的数据在动画期间返回,它可能会启动许多DOM操作,这可能会导致一些糟糕的动画。
  • ionViewDidEnter —如果您在使用过程中看到性能问题 ionViewWillEnter 当加载数据时,您可以执行数据调用 ionViewDidEnter 代替。但是,这个事件在页面被用户看到之前不会触发,所以您可能希望使用加载指示器或框架屏幕,这样在转换完成后内容不会不自然地闪烁。
  • ionViewWillLeave -可以用于清理,比如取消对可观察对象的订阅。自 ngOnDestroy 从当前页面导航时可能不会触发,如果你不想在屏幕不在视图中时激活清理代码,请把它放在这里。
  • ionViewDidLeave -当这个事件触发时,你知道新页面已经完全过渡,所以任何你可能不会做的逻辑,当视图是可见的,可以到这里。
  • ngOnDestroy -清理你不想清理的页面的逻辑 ionViewWillLeave
以前的
您的第一个应用程序
下一个
导航
Baidu