Ionic4 页面生命周期
本文主要介绍使用Ionic
和Angular
构造应用的页面的生命周期。
Ionic
支持Angular
的生命周期。Angular
的下面两种生命周期使用最多。
ngOnInit
组件初始化的时候触发一次。此事件可用于初始化成员变量并调用只需执行一次的服务。ngOnDestroy
在视图销毁之前调用,可用于取消对observables
订阅Ionic页面生命周期除了Angular
生命周期,Ionic Angular
提供了以下的生命周期事件。
ionViewWillEnter
在组件路由到视图,且进入动画开始前触发。ionViewDidEnter
在组件路由到视图,且进入动画完成时触发。ionViewWillLeave
在组件路由出视图,且离开动画开始前触发。ionViewDidLeave
在组件路由出视图,且离开动画完成后触发。ionViewWillEnter
和ionViewDidEnter
的区别主要在于触发的时机,前者在ngOnInit
之后页面动画之前触发,后者在页面动画之后触发。
对于ionViewWillLeave
和ionViewDidLeave
而言,ionViewWillLeave
在离开页面的动画开始时触发,而ionViewDidLeave
在新页面ionViewDidEnter
事件触发之后执行。
Ionic
有自己的路由器出口,即<ion-router-outlet />
,这个路由出口继承了Angular
的<router-outlet />
并具有一些附加功能,可为移动设备提供更好的体验。
当一个应用包在<ion-router-outlet />
中时,Ionic
的路由与Angular
有点差别。当您导航到一个新页面时,Ionic
会将旧页面保留在现有的DOM中,将该视图隐藏并转换新页面。我们这样做的原因有两个方面:
1) 我们可以维护旧页面的状态(屏幕上的数据、滚动位置等)。
2) 我们可以提供更平滑的页面转换,因为它已经存在,不需要重新创建。
页面只有在出栈时,才会从dom
中删除,例如点击UI
中的返回按钮或浏览器返回按钮。
由于这种特殊的处理方式,ngOnInit
和ngOnDestroy
在某些页面切换时可能并不会执行。
ngOnInit
仅在页面新创建时执行,而从其它页面返回到该页面时则不执行。例如,在选项卡界面中的每个页面之间导航只会调用每个页面的ngOnInit
方法一次,但在随后的访问中不会调用该方法。只有当页面出栈时,ngOnDestroy
才会启动。
在Ionic3
中,有两种附加的生命周期事件可用于控制何时可以进入页面ionViewCanEnter
和离开页面ionViewCanLeave
。这些可以用来保护页面不被未经授权的用户使用,并在您不希望用户离开时(如在填写表单时)将其保留在页面上。
这些方法在Ionic4
中被移除了,这部分功能可以通过Angular
的路由守卫来实现。
路由守卫可以实现对某个路由采取特定的操作。通过实现特定接口的类,CanActivate
和CanDeactivate
可以实现与删除事件ionViewCanEnter
和ionViewCanLeave
相同的功能。
@Injectable()export class AuthGuard implements CanActivate { constructor(private authService: AuthService) {} canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { return this.authService.isAuthenticated(); }}
使用该守卫时,需要将其添加到路由配置中。
{ path: 'settings', canActivate: [AuthGuard], loadChildren: '...', }
更多路由守卫相关的内容,请查看Angular
的路由守卫文档。
以下是关于每个生命周期事件的用例的一些提示。
ngOnInit
:初始化组件并从服务中加载数据,这些数据在以后每次访问时都不需要刷新。ionViewWillEnter
:由于ionViewWillEnter
在每次导航到该页面时都会调用(不管是否初始化),如果你需要每次进入页面都刷新,这是一个好的时机。然而,如果你的数据在动画加载过程中返回,会启动大量的DOM操作,这可能会导致一些不稳定的动画。ionViewDidEnter
:如果在ionViewWillEnter
中加载数据产生了性能问题,可以改为在ionViewDidEnter
中执行数据调用。但是,在用户看到页面之前,此事件不会触发,因此可能需要使用加载指示器或者骨架屏幕,来避免数据加载完成后内容不自然的闪烁。ionViewWillLeave
:可用于取消对observables
的订阅等代码的清理。当从当前页面导航到其它页面时ngOnDestroy
可能不会触发,因此,可以将清理相关的代码放置于此。ionViewDidLeave: 当这个事件触发时,新页面已完全加载完成。因此,需要在页面隐藏时执行的逻辑都可以放到这里。ngOnDestroy - 清除你不想在ionViewWillLeave
中清除的页面逻辑。原文链接https://ionicframework.com/docs/angular/lifecycle
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。