จัดการ/ปิด Hardware Back Button บน Ionic 3

การกด Back ที่เครื่องบน Ionic 3 นั้นหากไม่มีการจัดการแล้วจะเป็นการปิดแอพของเราออกไปดื้อ ๆ เลยครับ วันนี้ผมเลยจะมาลองจัดการ Event นี้แบบเบื้องต้นพอให้สามารถนำไปประยุกต์ใช้ต่อได้

ในการจัดการเบื้องต้นเมื่อผู้ใช้งานกดปุ่ม Back ผมจะให้เชคก่อนว่านั้นสามารถ กด Back ได้ไหมนะครับ หากว่ากดได้ก็จะทำการ pop หน้านั้นออกไปแต่ถ้า Back ไม่ได้ก็จะแสดง Popup แจ้งให้ผู้ใช้ยืนยันว่าจะออกจากแอพพลิเคชันหรือไม่โดยมีขั้นตอนการจัดการดังนี้ครับ

ขั้นตอนการจัดการ Hardware ฺBack Button

1. ทำการแก้ไขไฟล์ app.component โดยเพิ่ม import App,AlertController, Platform ลงไป
   
   import { App,AlertController, Platform } from 'ionic-angular';

   1	import { App,AlertController, Platform  } from 'ionic-angular';

2. แก้ไข constructer โดยเพิ่ม App,AlertController ลงไป
   
   constructor( private alertCtrl: AlertController, public app:App, public platform: Platform, ) { }

   1 2 3 4 5 6 7

   constructor(         private alertCtrl: AlertController,         public app:App,         public platform: Platform,              ) {        }

   
    
3. ทำการเพิ่มโค้ดสำหรับตรวจจับการกดปุ่ม Back และส่วนของ Popup ลงไปใน constructor
   
   platform.registerBackButtonAction(() => { let nav = app.getActiveNavs()[0]; let activeView = nav.getActive(); if (nav.canGoBack()){ //Can we go back? nav.pop(); } else { const alert = this.alertCtrl.create({ title: 'ออกจากแอพพลิเคชัน', message: 'คุณต้องการออกจากแอพพลิเคชัน?', buttons: [{ text: 'ยกเลิก', role: 'cancel', handler: () => { console.log('Application exit prevented!'); } },{ text: 'ตกลง', handler: () => { this.platform.exitApp(); // Close this application } }] }); alert.present(); } });

   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

   platform.registerBackButtonAction(() => {           let nav = app.getActiveNavs()[0];         let activeView = nav.getActive();           if (nav.canGoBack()){ //Can we go back?             nav.pop();           } else {             const alert = this.alertCtrl.create({               title: 'ออกจากแอพพลิเคชัน',               message: 'คุณต้องการออกจากแอพพลิเคชัน?',               buttons: [{                 text: 'ยกเลิก',                 role: 'cancel',                 handler: () => {                   console.log('Application exit prevented!');                 }               },{                 text: 'ตกลง',                 handler: () => {                   this.platform.exitApp(); // Close this application                 }               }]             });             alert.present();         }       });

   
   เพียงเท่านี้เมื่อ User ทำการกด Back ระบบก็จะทำการเชคว่าสามารถ Back ได้หรือไม่ หากได้ก็จะ Pop หน้านั้นออกไป แต่ถ้าไม่ได้ก็จะแสดง Popup ให้ผู้ใช้ Confirm ว่าต้องการออกจาก App หรือไม่

   ตัวอย่างโค้ดด้านบนก็เป็นเพียงการเชคง่าย ๆ เพื่อให้พอเข้าใจคอร์นเซป หวังว่ามันจะพอเป็นประโยชน์ในการนำไปประยุกต์ใช้นะครับ

หากมีข้อผิดพลาดประการใดก็ขออภัยด้วย

ขอบคุณบทความดี ๆ จาก www.gajotres.net