前端：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裏面調用。

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('即將銷燬頁面元素');
    }