betway东盟体育app离子页生命周期
本指南涵盖了页面生命周期在使用Ionic和Angular构建的应用程序中是如何工作的。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爱奥尼亚有一个路由器出口,叫做
< 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
.