IONIC 백버튼

IONIC 백버튼 관련하여 얘기해보려합니다.

 

각 페이지 별로 백버튼을 subscribe 할수도 있겠지만

 

필자의경우 app.component에서 다 처리하는 편입니다.

로직은 아래와 같으며, 홈화면에서 다른 화면이동시 백키동작이 됩니다.

 

기본 안드로이드 Back Key 처리로직

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Platform, ToastController } from '@ionic/angular';

declare var window: any;

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  private  backPressCount = 0;  // 백버튼 카운트


  constructor(
    private router: Router,
    private platform: Platform,
    private toastCtrl: ToastController

  ) {
    this.platform.backButton.subscribeWithPriority(1, () => { // to disable hardware back button on whole app
      console.log("백버튼 호출");
      window.history.back();
    });
  }

위의 로직에서

 

추가적으로 홈화면에서 앱종료를 시켜주고 싶을땐

우선 선행작업이 필요합니다.

1.

npm i cordova-plugin-exit

위 명령어를 콘솔창에 입력하여 모듈을 import 해야합니다.

cordova-plugin-exit

2.

로직을 입력합니다.

안드로이드 백키 앱종료 로직

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Platform, ToastController } from '@ionic/angular';

declare var window: any;

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  private  backPressCount = 0;  // 백버튼 카운트


  constructor(
    private router: Router,
    private platform: Platform,
    private toastCtrl: ToastController

  ) {

    this.platform.backButton.subscribeWithPriority(1, () => { // to disable hardware back button on whole app
      console.log("백버튼 호출");
      if (this.router.url === '/home') {
        if (this.backPressCount > 0) {
          window.cordova.plugins.exit();
        } else {
          this.backPressCount++;
          this.presentToast('한번 더 누르시면 App이 종료됩니다.');
          setTimeout(() => {
            this.backPressCount = 0;
          }, 5000);
        }
      } else{
          window.history.back();
      }
    });

  }

  async presentToast(str) {
    const toast = await this.toastCtrl.create({
      message: str,
      duration: 5000
    });
    toast.present();
  }
}

*참고사항 

아이오닉 자체 오류인 것같은데 앱 실행시 즉각적으로 백키로직이 동작되지는 않습니다... 

다른화면으로 이동하면 그때 적용됩니다... 왜 그런지는 저도 찾아보고있습니다...

아시는분은 댓글좀....

 

 

추가적으로 백키 방지로직 공유드립니다.

안드로이드 백키 방지 로직(매우 간단합니다 로직처리를 안하면됩니다.)

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Platform, ToastController } from '@ionic/angular';


declare var window: any;

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  private  backPressCount = 0;  // 백버튼 카운트

  constructor(
    private router: Router,
    private platform: Platform,
    private toastCtrl: ToastController

  ) {
    this.platform.backButton.subscribeWithPriority(1, () => { // to disable hardware back button on whole app
      console.log("백버튼 호출");
      if (this.router.url === '/home') {
        if (this.backPressCount > 0) {
          window.cordova.plugins.exit();
        } else {
          this.backPressCount++;
          
          setTimeout(() => {
            this.backPressCount = 0;
          }, 5000);
        }
      } 
      else{
        // 로직 처리를 안하면 백키가 동작되지 않습니다.
        // 이곳에 전역적으로 사용하는 boolean값을 추가하여 백키동작을 컨트롤 하시면되겠습니다.
        // (ex)
        // if(isBackKeyBlock) {
        //   window.history.back();
        // }
      }
    });
  }

  async presentToast(str) {
    const toast = await this.toastCtrl.create({
      message: str,
      duration: 5000
    });
    toast.present();
  }
}