Lifecycle events ที่เกิดขึ้นระหว่างขึ้นตอนการเปลี่ยนหน้า Page ใน Ionic

import { Component } from '@angular/core';
import { NavController, NavParams, LoadingController } from 'ionic-angular';

import { ArticleServiceProvider } from '../../providers/article-service/article-service';
import { ArticleDetailPage } from '../article-detail/article-detail';

interface articles {
  id: number,
  topic: string,
  description: string,
  date: string,
  img: string,
  view: number
}

@Component({
  selector: 'page-article',
  templateUrl: 'article.html',
})
export class ArticlePage {
  public articleItems: articles;
  public pushPage:any;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public articleService: ArticleServiceProvider,
    public loadingCtrl: LoadingController 
  ) { 
    this.pushPage = ArticleDetailPage;
  }

  ionViewCanEnter(){
    console.log("Page A CanEnter");
    return true;
  }

  ionViewDidLoad() {
    console.log("Page A DidLoad");

    let loading = this.loadingCtrl.create({
      content: 'Loading ...'
    }); 
    loading.present();

    this.articleService.getArticle()
      .subscribe((res: articles) => {
        this.articleItems = res;
        loading.dismiss();        
      });
  }

  ionViewWillEnter(){
    console.log("Page A WillEnter");
  }

  ionViewDidEnter(){
    console.log("Page A DidEnter");
  }
  
  ionViewWillLeave(){
    console.log("Page A WillLeave");
  }
  
  ionViewDidLeave(){
    console.log("Page A DidLeave");
  }
  
  ionViewWillUnload(){
    console.log("Page A WillUnload");
  }  

  ionViewCanLeave(){
    console.log("Page A CanLeave");
    return true;
  }    

  openArticle(id: any) {
    this.navCtrl.push(ArticleDetailPage, {
      id: id
    });
  }

}

import { Component } from '@angular/core';
import { NavController, NavParams, LoadingController } from 'ionic-angular';

import { ArticleServiceProvider } from '../../providers/article-service/article-service';

interface articles{
  id:number,
  topic:string,
  description:string,
  date:string,
  img:string,
  view:number
}

@Component({
  selector: 'page-article-detail',
  templateUrl: 'article-detail.html',
})
export class ArticleDetailPage {
  public article:articles;
  
  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public articleService:ArticleServiceProvider,
    public loadingCtrl: LoadingController 
  ){  }

  ionViewCanEnter(){
    console.log("Page B CanEnter");
    return true;
  }

  ionViewDidLoad() {
    console.log("Page B DidLoad");

    let loading = this.loadingCtrl.create({
      spinner:'ios',
      content: 'Loading ...'
    }); 
    loading.present();

    let id = this.navParams.get("id");
    this.articleService.getArticle(id)
    .subscribe((res:articles) =>{
        this.article = res[0];
        loading.dismiss();  
    });    
  }

  ionViewWillEnter(){
    console.log("Page B WillEnter");
  }

  ionViewDidEnter(){
    console.log("Page B DidEnter");
  }
  
  ionViewWillLeave(){
    console.log("Page B WillLeave");
  }
  
  ionViewDidLeave(){
    console.log("Page B DidLeave");
  }
  
  ionViewWillUnload(){
    console.log("Page B WillUnload");
  }  

  ionViewCanLeave(){
    console.log("Page B CanLeave");
    return true;
  }    

}