前端：Angular框架和Ionic框架的生命周期详解

一、angular 生命周期钩子

• ngOnInit()

  在

  Angular

  第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件；

• ngAfterViewInit()

  初始化完组件视图及其子视图之后调用。

ngOnInit() 钩子是我们用得最频繁的一个，在使用新建组件命令

ng g component 组件名称

生成一个组件后，就有 ngOnInit() 方法。

ngOnInit() 钩子可以作为初始化时调用一些方法。

ngOnInit() {
//程序初始化时进行调用方法
this.getNewsList();
}

getNewsList(){
this.newsservice.getNewsList()
.then((data:any)=>{
this.nl=new Array();
this.nl=data;
})
}

想要多次执行的方法可以在构造方法

constructor

二、Ionic生命周期

可以在官方文档里面看到，ionic常用的生命周期有如下6个

• ionViewDidLoad

  ：当页面加载的时候触发，仅在页面创建的时候触发一次

• ionViewWillEnter

  ：当将要加载页面时触发

• ionViewDidEnter

  ：当进入页面时触发

• ionViewWillLeave

  ：当将要从页面离开时触发

• ionViewDidLeave

  ：离开页面时触发

• ionViewWillUnload

  ：当页面元素将要销毁时触发

可以写一个简单的案例

ionViewDidLoad(){
console.log('页面即将加载，且只执行一次');
}
ionViewWillEnter() {
console.log('页面即将加载时进入');
}

ionViewDidEnter() {
console.log('进入页面之后');
}

ionViewWillLeave() {
console.log('将要离开页面');
}

ionViewDidLeave() {
console.log('离开页面之后');
}

ionViewWillUnload() {
console.log('即将销毁页面元素');
}