ionic2, Angular에서 뒤로 가기 버튼(Back Button) 누를 때 자연스러운 앱 동작 코딩

인터넷에 ionic2, Angular 뒤로 가기 버튼에 대하여 검색하면

형식적으로 뒤로 가기 버튼 두 번 누르면 ionic 앱이 꺼지게 하는 기능이나,

팝업을 열어서 앱을 종료할 것인지 확인하는 등 아주 기본적인 뒤로 가기 버튼 동작을 알려준다.

 

그러나 개발을 하다 보면 뒤로 가기 종료 동작은 메인(root)에서만 가능해야 하며

(메인이 아니면 보통 이전 화면으로 가는 것이 맞다)

이미 팝업이 켜져 있는 상황이라든가

(종료 동작이나 그냥 이전 화면으로 가는 것보다는 팝업부터 끄는 것이 자연스러움), 

메뉴가 열려있는 상황

(역시나 종료 동작이나 그냥 이전 화면으로 가는 것보다는 메뉴부터 닫는 것이 자연스러움),

평범하게 nav로 이동하지 않고 view로 연 경우 등 고려할 것들이 많아진다.

 

아래 방법보다 더 쉬운 방법이 있을 수 있겠지만

작성 당시 ionic에 대한 자료가 충분치 않아 직접 몇 번의 실험 끝에 작성된 코드를 공유한다.

 

다른 곳(root page 정도)에 작성해도 무리 없지만 나는 app.component.ts에 작성하였다.

import { Component } from '@angular/core';
import { Platform, App, NavController, MenuController, ToastController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  private navCtrl: NavController;
  rootPage:any = HomePage;
  mFlag: boolean = false;
  
  constructor(platform: Platform, 
              statusBar: StatusBar, 
              public app: App, 
              public menu: MenuController,
              public toastCtrl: ToastController,
              splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();

      platform.registerBackButtonAction(() => {
          try {
                let nav = this.app.getActiveNav();

                let view = nav.last();
                const portal = app._appRoot._getPortal();

                if (this.menu.isOpen() == true) {
                    this.menu.close();
                } else if(portal.length() != 0) {
                    this.app._appRoot._overlayPortal.getActive().dismiss();//팝업 창이 뜬게 있다면 팝업 창도 닫아줌 
                } else if (view.isOverlay) {
                    view.dismiss({});
                } else if (view.isFirst()) { //root에서만 되게하기
                    if (!this.mFlag) {
                        this.mFlag = true;
                        let toast = toastCtrl.create({
                                        message: "뒤로 버튼을 한 번 더 누르시면 앱이 종료됩니다.",
                                        duration: 3000,
                                        position: "middle",
                                        cssClass: "toast-default"
                        });
                        toast.present();

                        //3초 기다리기  
                        setTimeout(() => {
                            this.mFlag = false;
                        }, 3000);
                    } else {
                        platform.exitApp();
                    }
                } else {
                    nav.pop();
                }
            } catch (e) {
                console.log("back action listener error :" + e);
            }
        });
    });
  }
}