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
Cordova plugin for exiting the app programmatically for Android, iOS and WP
www.npmjs.com
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();
}
}
728x90
반응형
'IONIC' 카테고리의 다른 글
| npm 설치시 터미널 이슈 (0) | 2021.09.01 |
|---|
