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

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

Angular生命周期事件

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

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

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

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

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

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

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

离子如何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 ．