搜索文件 /

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

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

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

角生命周期事件

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

事件名称 描述
ngoninit. 在组件初始化期间触发一次。此活动可用于初始化本地成员并拨打仅需要完成一次的服务。
ngondestroy 在角度摧毁视图之前射击。有用的清除如取消订阅可观察到。

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

使用的组件 离子导航 或者 离子路由器出口 不应该使用 onpush. 改变检测策略。这样做会阻止生命周期钩等 ngoninit. 从射击。另外,异步状态变化可能无法正确呈现。

betway东盟体育app离子页面活动

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

事件名称 描述
IonViewWillenter. 当组件路由即将设置为View时触发。
IonviewDienter. 组件路由已完成动画时触发。
IonviewWillleave. 当组件路由即将设置动画时触发。
IonviewDidleave. 组件路由已完成动画时触发。

和...之间的不同 IonViewWillenter. IonviewDienter. 是他们火的时候。前者之后的火灾 ngoninit. 但在页面转换开始之前,并且后者直接在过渡结束后。

为了 IonviewWillleave. IonviewDidleave. IonviewWillleave. 直接在远离当前页面后直接调用,并开始 IonviewDidleave. 直到新页面成功转换为(新页面后) IonviewDienter. 火灾)。

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

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

betway东盟体育app离子有其路由器出口,称为 <离子路由器 - 出口/> 。这个插座延伸了角度 <路由器 - 出口/> 具有一些额外的功能,可以为移动设备提供更好的体验。

当一个应用程序包裹 <离子路由器 - 出口/> ,离betway东盟体育app子处理有点不同的导航。当您导航到新页面时,IONIC会将旧页面保留在现有DOM中,但从您betway东盟体育app的视图中隐藏它并转换新页面。我们这样做的原因是两倍:

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

例如,当“弹出”时,只能从DOM中删除页面,例如,按UI中的返回按钮或浏览器返回按钮。

因为这个特殊的处理, ngoninit. ngondestroy 当通常认为他们应该时,方法可能不会发射。

ngoninit. 每次新创建页面时,只会射击,但在导航回页面时没有。例如,选项卡接口中的每个页面之间导航仅调用每个页面 ngoninit. 方法一次,但不在后续访问。 ngondestroy 只有在“弹出”页面时会启动。

路线卫兵

在离子betway东盟体育app3中,有几种额外的生命周期方法可以在输入页面时控制( IonViewCanenter. ) 走了 ( Ionviewcanleave. )。这些可用于保护页面免受未经授权的用户,并在不希望它们离开(如在表单填充期间)时将用户保留在页面上。

在离子4中除去这些方法,有利于使用角度的路径防护。betway东盟体育app

路线保护有助于确定是否可以针对路线采取特定动作。它们是实现某个接口的课程。这 Canactivate. CanceActivate. 接口可用于实现删除事件的相同类型的逻辑 IonViewCanenter. Ionviewcanleave. 做过。


             @
              可注射的
              
              的)
             
              出口
             
              班级
             
              Authguard.
             
              实施
             
              Canactivate.
             
              {
             
              构造函数
              
               私人的
              authservice.
               
              authservice.
              的)
             
              {
              }
             
              Canactivate.
              
              路线
               
              activatedRoutesnapshot.
               
              状态
               
              ruterstatesnapshot.
              的)
             
              {
             
              返回
             
              
              
             authservice.
              
              isauthenticated
              
              的)
              ;
             
              }
             
              }
复制 复制

要使用此警卫,请将其添加到路由定义中的相应参数:


              {
             小路
              
             
              '设置'
              
             Canactivate.
              
             
              [
             Authguard.
              ]
              
             loadchildren.
              
             
              '...'
              
             
              }
复制 复制

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

每次生命周期方法的指导

以下是每个生命周期事件的使用案例的一些提示。

  • ngoninit. - 初始化您的组件并从不需要在后续访问时不需要刷新的服务中的数据。
  • IonViewWillenter. - 自从 IonViewWillenter. 每次导航到(无论初始化是否初始化)时,都会调用,这是从服务中加载数据的好方法。但是,如果您的数据在动画期间回来,它可以启动大量的DOM操作,这可能导致一些janky动画。
  • IonviewDienter. - 如果您看到使用性能问题 IonViewWillenter. 加载数据时,您可以执行数据 IonviewDienter. 反而。然而,此事件将无法触发,直到用户可见页面之后,因此您可能希望使用加载指示灯或骨架屏幕,因此在转换完成后内容不会自然闪烁。
  • IonviewWillleave. - 可以用于清理,如取消用户观察到。自从 ngondestroy 从当前页面导航时可能不会启动,如果在屏幕未视图中不希望它处于活动状态,请在此处放置您的清理代码。
  • IonviewDidleave. - 当此事件触发时,您知道新页面已完全转换,因此在视图可见时,您可能通常可能无法执行的任何逻辑。
  • ngondestroy - 为您不想清理的页面的清理逻辑 IonviewWillleave.
以前的
你的第一个应用程序
下一个
导航
Baidu