on
IONIC 백버튼
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 해야합니다.
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(); } }
반응형
from http://tlshenm.tistory.com/65 by ccl(A) rewrite - 2021-10-24 11:27:23