Ionic4页面生命周期

Ionic4 页面生命周期

本文主要介绍使用IonicAngular构造应用的页面的生命周期。

创新互联主要从事成都做网站、成都网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务纳雍,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

Ionic4 页面生命周期

Angular生命周期

Ionic支持Angular的生命周期。Angular的下面两种生命周期使用最多。

事件名称描述
ngOnInit 组件初始化的时候触发一次。此事件可用于初始化成员变量并调用只需执行一次的服务。
ngOnDestroy 在视图销毁之前调用,可用于取消对observables订阅

Ionic页面生命周期

除了Angular生命周期,Ionic Angular提供了以下的生命周期事件。

事件名称描述
ionViewWillEnter 在组件路由到视图,且进入动画开始前触发。
ionViewDidEnter 在组件路由到视图,且进入动画完成时触发。
ionViewWillLeave 在组件路由出视图,且离开动画开始前触发。
ionViewDidLeave 在组件路由出视图,且离开动画完成后触发。

ionViewWillEnterionViewDidEnter的区别主要在于触发的时机,前者在ngOnInit之后页面动画之前触发,后者在页面动画之后触发。

对于ionViewWillLeaveionViewDidLeave而言,ionViewWillLeave在离开页面的动画开始时触发,而ionViewDidLeave在新页面ionViewDidEnter事件触发之后执行。

Ionic4 页面生命周期

Ionic如何处理页面的生命

Ionic有自己的路由器出口,即<ion-router-outlet />,这个路由出口继承了Angular<router-outlet />并具有一些附加功能,可为移动设备提供更好的体验。

当一个应用包在<ion-router-outlet />中时,Ionic的路由与Angular有点差别。当您导航到一个新页面时,Ionic会将旧页面保留在现有的DOM中,将该视图隐藏并转换新页面。我们这样做的原因有两个方面:

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

页面只有在出栈时,才会从dom中删除,例如点击UI中的返回按钮或浏览器返回按钮。

由于这种特殊的处理方式,ngOnInitngOnDestroy在某些页面切换时可能并不会执行。

ngOnInit仅在页面新创建时执行,而从其它页面返回到该页面时则不执行。例如,在选项卡界面中的每个页面之间导航只会调用每个页面的ngOnInit方法一次,但在随后的访问中不会调用该方法。只有当页面出栈时,ngOnDestroy才会启动。

路由守卫

Ionic3中,有两种附加的生命周期事件可用于控制何时可以进入页面ionViewCanEnter和离开页面ionViewCanLeave。这些可以用来保护页面不被未经授权的用户使用,并在您不希望用户离开时(如在填写表单时)将其保留在页面上。

这些方法在Ionic4中被移除了,这部分功能可以通过Angular的路由守卫来实现。

路由守卫可以实现对某个路由采取特定的操作。通过实现特定接口的类,CanActivateCanDeactivate可以实现与删除事件ionViewCanEnterionViewCanLeave相同的功能。

@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


新闻标题:Ionic4页面生命周期
标题来源:http://scyanting.com/article/gpsdss.html