web-dev-qa-db-ja.com

Ionic 2：アプリの終了の確認を確認するハードウェアの戻るボタンの処理方法

アプリケーションを終了するときに確認を確認するデフォルトのモバイルの戻るボタンを処理する方法に問題があります。戻るボタンを押した場合、終了を確認するためにポップアップを表示するハンドラを呼び出す必要があります。 OR registerBackButtonAction（）のメソッド呼び出しがありますか？それともIONIC 2で使用する方法はありますか？助けてください。事前に感謝します。

androidangularionic2
10
Tushar Rmesh Saindane

これは私の解決済みで動作するコードです。みんなありがとう。

constructor(platform: Platform,public alertCtrl: AlertController,public toastCtrl:ToastController) {
    platform.ready().then(()=>{
       platform.registerBackButtonAction(()=>this.myHandlerFunction());
       StatusBar.styleDefault();
      Splashscreen.hide();
})
  }

    myHandlerFunction(){
     let toast = this.toastCtrl.create({
      message: "Press Again to Confirm Exit",
      duration: 3000
    });
    toast.present(); 
     }
4
Tushar Rmesh Saindane

App.component.tsで

        @ViewChild(Nav) nav: Nav;

        constructor(private platform: Platform, private toastCtrl:   ToastController, private alertCtrl: AlertController) {
            platform.ready().then(() => {
              // Okay, so the platform is ready and our plugins are available.
              // Here you can do any higher level native things you might need

              platform.registerBackButtonAction(() => {


                //uncomment this and comment code below to to show toast and exit app
                // if (this.backButtonPressedOnceToExit) {
                //   this.platform.exitApp();
                // } else if (this.nav.canGoBack()) {
                //   this.nav.pop({});
                // } else {
                //   this.showToast();
                //   this.backButtonPressedOnceToExit = true;
                //   setTimeout(() => {

                //     this.backButtonPressedOnceToExit = false;
                //   },2000)
                // }

                if(this.nav.canGoBack()){
                  this.nav.pop();
                }else{
                  if(this.alert){ 
                    this.alert.dismiss();
                    this.alert =null;     
                  }else{
                    this.showAlert();
                   }
                }
              });
            });

          }

          showAlert() {
          this.alert = this.alertCtrl.create({
            title: 'Exit?',
            message: 'Do you want to exit the app?',
            buttons: [
              {
                text: 'Cancel',
                role: 'cancel',
                handler: () => {
                  this.alert =null;
                }
              },
              {
                text: 'Exit',
                handler: () => {
                  this.platform.exitApp();
                }
              }
            ]
          });
          alert.present();
        }

          showToast() {
            let toast = this.toastCtrl.create({
              message: 'Press Again to exit',
              duration: 2000,
              position: 'bottom'
            });

            toast.onDidDismiss(() => {
              console.log('Dismissed toast');
            });

            toast.present();
          }
26
nabin

Ionic最新バージョン3.xx

app.component.tsファイル：

import { Platform, Nav, Config, ToastController } from 'ionic-angular';

constructor(public toastCtrl: ToastController, public platform: Platform) {
    platform.ready().then(() => {
        //back button handle
        //Registration of Push in Android and Windows Phone
        var lastTimeBackPress = 0;
        var timePeriodToExit  = 2000;

        platform.registerBackButtonAction(() => {
            // get current active page
            let view = this.nav.getActive();
            if (view.component.name == "TabsPage") {
                //Double check to exit app
                if (new Date().getTime() - lastTimeBackPress < timePeriodToExit) {
                    this.platform.exitApp(); //Exit from app
                } else {
                    let toast = this.toastCtrl.create({
                        message:  'Press back again to exit App?',
                        duration: 3000,
                        position: 'bottom'
                    });
                    toast.present();
                    lastTimeBackPress = new Date().getTime();
                }
            } else {
                // go to previous page
                this.nav.pop({});
            }
        });
    });
}
16
Mohamed Arshath

Platform api にはハンドラーregisterBackButtonActionがあります。

次のようなことができます：

App.component.tsで

    constructor(platform: Platform){
     platform.ready().then(()=>{
       platform.registerBackButtonAction(()=>this.myHandlerFunction());
})


  myHandlerFunction(){
    //create alert
     }
4
Suraj Rao

ちょっとパーティーに遅れました...しかし、プッシュされたページを閉じる以外に、特にいくつかのタブページがあるプロジェクトの場合、戻るボタンがあります。

ページがルートページではなく、タブページのnavCtrlのいずれかにプッシュされる場合があります。したがって、それらすべてをチェックする必要があります。

また、ページやメニューが開いていない場合は、最近使用したタブ（Instagramアプリと同様）を一周して、前のタブに戻る必要があります。さらに、各タブに2回以上戻るべきではありません（Instagramと同様）

ここでの答えに触発され、必要なすべての機能を処理する包括的な方法を作成しました。

  • サイドメニュー：サイドメニューが開いていた場合は閉じます
  • プッシュされたページ：タブページのナビゲーションコントローラーのいずれかにプッシュされた可能性のあるページをすべて閉じます
  • タブを切り替える：メニューが閉じられ、プッシュされたページがなかった場合、ユーザーはスタックを使用して前回使用したタブに戻る必要があります。
  • 警告を表示：最近使用したタブがなかった場合、警告ボックスが表示され、終了するかどうかをユーザーに尋ねる必要があります。

詳細はこちら ブログ投稿

デモコードは my github からダウンロードできます。

1
Ari

HTML：

<button (click)="exitApp()">Close application<button>

TypeScript：

import {Platform} from 'ionic-angular';

@Page({ /*...*/ })
export MyPage {
 constructor(platform: Platform) {
  this.platform = platform;
 }
 exitApp(){
  this.platform.exitApp();
 }
}
1
Ramandeep Kaur

私は多くの研究を行うことでこの機能を作成することができました。それが役に立てば幸い。

    // I am using this.isExitAlertOpen just to make sure that the alert does not open if already open.

    handleBackButton() {
    this.platform.registerBackButtonAction(() => {
        // const activePortal =
        // this.ionicApp._modalPortal.getActive() ||
        // this.ionicApp._loadingPortal.getActive() ||
        // this.ionicApp._toastPortal.getActive() ||
        // this.ionicApp._overlayPortal.getActive();

        // console.warn('ACTIVE PORTALS', activePortal);

        const activeModal = this.ionicApp._modalPortal.getActive();
        console.warn('MODAL', activeModal);

activePortalは、アラート、ローダー、モーダルなどを含む関連するアクティブポータルを見つけるために使用できます。[戻る]ボタンですべてを処理する場合、またはその一部を使用方法に従ってコメント解除する場合

私の場合、モーダルがアクティブかどうかだけを確認したいので、モーダルのみを確認しました。

        //  if (activePortal) {
        //    activePortal.dismiss();
        //  }

        if (activeModal) {
            activeModal.dismiss();
        } else if (this.nav.canGoBack()) {
            this.nav.pop();
        } else {
            if (this.isExitAlertOpen) return;
            this.isExitAlertOpen = true;
            this.showExitAlert();
        }
    });
}

showExitAlert() {
    this.alertCtrl.create({
        title: 'Exit',
        message: 'Are you sure you want to exit the app?',
        enableBackdropDismiss: false,
        buttons: [
            {
                text: 'Yes',
                handler: () => {
                    this.isExitAlertOpen = false;
                    this.platform.exitApp();
                }
            }, {
                text: 'Cancel',
                role: 'cancel',
                handler: () => {
                    this.isExitAlertOpen = false;
                }
            }
        ]
    }).present();
}
1
d_bhatnagar