web-dev-qa-db-fra.com

Désactiver le bouton de retour du matériel dans l'application ionique?

J'essaie de désactiver le bouton de retour de mon application Cordova . J'utilise AngularJS + Ionic Framework . J'ai trouvé des sujets à ce sujet et j'ai essayé le code ci-dessous, mais cela n'a aucun effet. Une idée? Merci!

index.html

<head>
    <script>
      document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() {
            document.addEventListener("backbutton", function (e) {
                e.preventDefault();
                console.log("hello");
            }, false );
        }
    </script>
</head>

Notez que lorsque je repousse sur le bouton, le message «Bonjour» est affiché dans ma console.

androidangularjscordovajavascript-eventsionic-framework
27
David D.

Enfin trouvé la réponse sur this Ionic Forum Thread:

$ionicPlatform.registerBackButtonAction(function () {
  if (condition) {
    navigator.app.exitApp();
  } else {
    handle back action!
  }
}, 100);

$ionicPlatform.registerBackButtonAction permet de complètement écraser le comportement du bouton. Le premier paramètre est une fonction de rappel et le second une priorité (seul le rappel avec la priorité la plus élevée est exécuté).

37
David D.
$ionicPlatform.registerBackButtonAction(function (event) {
    event.preventDefault();
}, 100);

cela empêchera la fonctionnalité du bouton Précédent. 

22
Muhammad Faizan Khan

Pour développer la réponse de David D, j'ai inclus la mise en œuvre du retour en arrière. 

Mettez ceci dans la fonction .run de votre application:

$ionicPlatform.registerBackButtonAction(function (event) {
  if ($ionicHistory.currentStateName() === 'someStateName'){
    event.preventDefault();
  } else {
    $ionicHistory.goBack();
  }
}, 100);

Cela ne fonctionnera pas dans les contrôleurs, il est d'application large.

12
Weston Ganger

Son astuce simple empêche de revenir à la page unique:

  `.controller('DashCtrl', function($scope,$ionicHistory) {
                $ionicHistory.clearCache();
                $ionicHistory.clearHistory();

       })`
4
Niv Kapade

Pour empêcher l'utilisation de la fonctionnalité du bouton de retour de l'appareil depuis l'application,

      $ionicPlatform.registerBackButtonAction(function (event) {
           event.preventDefault();
      }, 100);

Si vous souhaitez empêcher l'utilisation de cette page,

       $ionicPlatform.registerBackButtonAction(function (event) {
           event.preventDefault();
           if ($location.path() === "/pagename" || $location.path() === "pagename") {
             navigator.app.exitApp();
           } else {
             $ionicHistory.goBack();
           }
        }, 100);
2
S.M.Priya

L'exemple dans docs montre que les écouteurs d'événement, même le deviceready, sont attachés après le déclenchement de l'événement document onload.

En utilisant votre code:

function onDeviceReady() {
  document.addEventListener("backbutton", function (e) {
    e.preventDefault();
    console.log("hello");
  }, false);
}

document.onload = function () {
  document.addEventListener("deviceready", onDeviceReady, false);
};
2
Tautologistics

Pour Ionic 3: 

// root component
export class MyApp {

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

  customBackButtonHandler() {
    ...
  }

}
1
Prashant Ghimire

Pour désactiver le bouton de retour matériel dans l'application Ionic pour le contrôleur (ou le contrôleur du composant), vous pouvez utiliser la solution suivante, mais en premier lieu, ce n'est pas le contrôleur lui-même, mais la combinaison entre les contrôleurs et l'état, dans votre contrôleur, ajoutez votre code normal. :

  var deRegisterHardBack = $ionicPlatform.registerBackButtonAction(
      function (event) {
        if (youConditionHere) {
          event.preventDefault();
          // do something
        } else {
          $ionicHistory.goBack();
        }
      }, 100);

Mais dans votre $stateProvider, ajoutez disableHardwareBackButton comme suit:

$stateProvider
      .state('app.stateB', {
        url: '/page-b/:id',
        template: '<ion-view><ion-nav-title>Sub Page </ion-nav-title>Hello</ion-view>',
        disableHardwareBackButton : true
      });

Dans votre module ('app'). Lancez la fonction:

$ionicPlatform.registerBackButtonAction(function(event){
   if ($state.current.disableHardwareBackButton){
      event.preventDefault();
   } else {
      $ionicHistory.goBack();
   }
}

De cette façon, vous contournez le problème avec "sous-section" ou "contrôleur interne"

0
Al-Mothafar