前端：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('即将销毁页面元素');
    }