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

1、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里面调用。java

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