Ionic 生命周期

Ionic 生命周期介绍 官网

我会通过两个路由组件的跳转来查看这四个生命周期的触发时机：

//login.page.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

  constructor(private router:Router) {}

  ngOnInit() {
  }

  toTab1()(){
    this.router.navigate(["tabs/tab1"])
  }

  ionViewWillEnter(){
    console.log('login ionViewWillEnter')
  }
  
  ionViewDidEnter(){
    console.log('login ionViewDidEnter')
  }
  
  ionViewWillLeave(){
    console.log('login ionViewWillLeave')
  }

  ionViewDidLeave(){
    console.log('login ionViewDidLeave')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

//tab1.page.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  constructor(private router:Router) {}

  toLogin(){
    this.router.navigateByUrl("login")
  }
  ionViewWillEnter(){
    console.log('tab1 ionViewWillEnter')
  }
  
  ionViewDidEnter(){
    console.log('tab1 ionViewDidEnter')
  }
  
  ionViewWillLeave(){
    console.log('tab1 ionViewWillLeave')
  }

  ionViewDidLeave(){
    console.log('tab1 ionViewDidLeave')
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

操作步骤：从登录页面点击 进入按钮 进入 tab1页面，随后点击按钮返回登录页面，看控制台打印的数据。

检查后发现与路由的加载方式有关，修改路由：

第一种：

第二种：

结果都一样，组件正常销毁！

路由组件的完成销毁都在下一个路由组件加载完成后才触发！

---

Android "两次返回退出"的实现

//MainActivity.java
package io.ionic.starter;
import android.view.KeyEvent;
import android.widget.Toast;

import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {
  private long exitTime=0;

  @Override
  public boolean onKeyDown(int keyCode,KeyEvent event){
    if(keyCode==KeyEvent.KEYCODE_BACK){
      exit();
      return false;
    }
    return super.onKeyDown(keyCode,event);
  }

  private void exit() {
    if ((System.currentTimeMillis() - exitTime) > 2000) {
      Toast.makeText(getApplicationContext(),"再按一次退出程序", Toast.LENGTH_SHORT).show();
      exitTime = System.currentTimeMillis();
    }
    else{
      finish();
      System.exit(0);
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30