Désactiver le bouton de retour du matériel dans L'application ionique?
J'essaie de désactiver le bouton de retour sur mon application Cordova. J'utilise AngularJS + cadre ionique. J'ai trouvé des sujets à ce sujet et essayé le code ci-dessous, mais cela n'a absolument 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 le bouton, j'ai" hello " affiché dans ma console.
8 réponses
Enfin trouvé la réponse sur ce Ionique fil de discussion:
$ionicPlatform.registerBackButtonAction(function () {
if (condition) {
navigator.app.exitApp();
} else {
handle back action!
}
}, 100);
$ionicPlatform.registerBackButtonAction permet d'écraser complètement le comportement du bouton de retour.
Le premier paramètre est une fonction de rappel et le secondune priorité (seul le rappel avec la priorité la plus élevée est exécuté).
$ionicPlatform.registerBackButtonAction(function (event) {
event.preventDefault();
}, 100);
Cela empêchera la fonctionnalité du bouton Retour.
Pour développer la réponse de David d, j'ai inclus la mise en œuvre de retour.
Mettez ceci dans vos applications .run Fonction:
$ionicPlatform.registerBackButtonAction(function (event) {
if ($ionicHistory.currentStateName() === 'someStateName'){
event.preventDefault();
} else {
$ionicHistory.goBack();
}
}, 100);
Cela ne fonctionnera pas dans les contrôleurs, il est large application.
Son truc simple empêche de revenir à une seule page:
`.controller('DashCtrl', function($scope,$ionicHistory) {
$ionicHistory.clearCache();
$ionicHistory.clearHistory();
})`
L'exemple dans les documents montre que les écouteurs d'événements - même le deviceready - sont attachés après le déclenchement de l'événement onload du document.
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);
};
Pour empêcher L'application d'utiliser la fonctionnalité du bouton de retour de l'appareil,
$ionicPlatform.registerBackButtonAction(function (event) {
event.preventDefault();
}, 100);
Si vous voulez empêcher l'utilisation de la page particulière,
$ionicPlatform.registerBackButtonAction(function (event) {
event.preventDefault();
if ($location.path() === "/pagename" || $location.path() === "pagename") {
navigator.app.exitApp();
} else {
$ionicHistory.goBack();
}
}, 100);
Pour désactiver le bouton de retour du matériel dans L'application Ionic pour le contrôleur (ou le contrôleur de Composant), vous pouvez faire la solution de contournement suivante, mais d'abord ce n'est pas pour 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 ajouter 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').fonction d'exécution:
$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 " inside contrôleur"
Pour Ionique 3:
// root component
export class MyApp {
constructor(platform: Platform) {
platform.ready().then(() => {
platform.registerBackButtonAction(() => {
this.customBackButtonHandler();
}, 100)
});
}
customBackButtonHandler() {
...
}
}