การกด Back ที่เครื่องบน Ionic 3 นั้นหากไม่มีการจัดการแล้วจะเป็นการปิดแอพของเราออกไปดื้อ ๆ เลยครับ วันนี้ผมเลยจะมาลองจัดการ Event นี้แบบเบื้องต้นพอให้สามารถนำไปประยุกต์ใช้ต่อได้
ในการจัดการเบื้องต้นเมื่อผู้ใช้งานกดปุ่ม Back ผมจะให้เชคก่อนว่านั้นสามารถ กด Back ได้ไหมนะครับ หากว่ากดได้ก็จะทำการ pop หน้านั้นออกไปแต่ถ้า Back ไม่ได้ก็จะแสดง Popup แจ้งให้ผู้ใช้ยืนยันว่าจะออกจากแอพพลิเคชันหรือไม่โดยมีขั้นตอนการจัดการดังนี้ครับ
ขั้นตอนการจัดการ Hardware ฺBack Button
- ทำการแก้ไขไฟล์ app.component โดยเพิ่ม import App,AlertController, Platform ลงไป
1import { App,AlertController, Platform } from 'ionic-angular'; - แก้ไข constructer โดยเพิ่ม App,AlertController ลงไป
1234567constructor(private alertCtrl: AlertController,public app:App,public platform: Platform,) {}
- ทำการเพิ่มโค้ดสำหรับตรวจจับการกดปุ่ม Back และส่วนของ Popup ลงไปใน constructor
1234567891011121314151617181920212223242526platform.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
0 Comments