ionic-framework - otra - navegar entre paginas ionic 3

Al hacer clic en el botón Atrás del dispositivo, se cierra la aplicación en lugar de volver a la página anterior

Question

Si hace clic en cualquier ion-item , abre la página deseada, pero si hago clic en el botón Atrás del dispositivo, cierra la aplicación en lugar de volver a la página anterior en Android:

Este es mi menú lateral iónico:

<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon icon ion-android-menu" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-positive">
<h1 class="title"></h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ng-click="login()">
Login
</ion-item>
<ion-item menu-close ui-sref="app.search">
Search
</ion-item>
<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>

Aquí está app.js :

 .state(''app'', {
url: ''/app'',
abstract: true,
templateUrl: ''templates/menu.html'',
controller: ''AppCtrl''
})
.state(''app.search'', {
url: ''/search'',
views: {
''menuContent'': {
templateUrl: ''templates/search/default.html''
}
}
})
.state(''app.search-form'', {
url: ''/search-form'',
views: {
''menuContent'': {
templateUrl: ''templates/search/search-form.html''
}
}
})

Una solución que encontré:

$ionicHistory.nextViewOptions({
disableBack: true,
historyRoot: true
});

Entonces, cuando haga clic en un botón y vaya a la página siguiente, esto desactivará el botón Atrás.

Answer 1

El comportamiento predeterminado del botón de retroceso es el siguiente: Regrese al historial, si la pila de historial está vacía, salga de la aplicación.

Por lo tanto, debe verificar el estado $ en el que se encuentra cuando toca el botón de retroceso del hardware.

Con el siguiente código (colocado en la función de ejecución de su módulo) puede sobrescribir el comportamiento predeterminado. Por ejemplo, puede deshabilitar la salida de la aplicación de esta manera:

$ionicPlatform.registerBackButtonAction(function (event) {
if($state.current.name=="app.home"){
navigator.app.exitApp(); //<-- remove this line to disable the exit
}
else {
navigator.app.backHistory();
}
}, 100);

Consulte la documentación de $ionicPlatform .

Answer 2

Es el atributo de menu-close en el menú lateral que borra el historial. Puede experimentar reemplazándolo con menu-toggle="left" . Eso todavía cerrará la barra lateral pero mantendrá el historial.

Terminé anulando el comportamiento de la tecla de retroceso HW como a continuación. Envía al usuario a la vista inicial antes de salir de la aplicación al presionar hacia atrás. Tenga en cuenta que todavía uso el atributo de menu-close en el menú lateral. También tenga en cuenta que window.localStorage["start_view"] la URL de inicio en window.localStorage["start_view"] porque puede cambiar en mi aplicación. Espero que pueda ayudar / inspirar a alguien más con este problema.

$ionicPlatform.registerBackButtonAction(function(event) {
if ($ionicHistory.backView() == null && $ionicHistory.currentView().url != window.localStorage["start_view"]) {
// Goto start view
console.log("-> Going to start view instead of exiting");
$ionicHistory.currentView($ionicHistory.backView()); // to clean history.
$rootScope.$apply(function() {
$location.path(window.localStorage["start_view"]);
});
} else if ($ionicHistory.backView() == null && $ionicHistory.currentView().url == window.localStorage["start_view"]) {
console.log("-> Exiting app");
navigator.app.exitApp();
} else {
// Normal back
console.log("-> Going back");
$ionicHistory.goBack();
}
}, 100);

Answer 3

Esto evita que el evento se propague, de lo contrario no funcionó.

Código por:

$ionicPlatform.registerBackButtonAction(function (event) {
if(condition){
navigator.app.exitApp(); //<-- remove this line to disable the exit
}
else {
navigator.app.backHistory();
}
throw "PreventBackButton";
}, 100);

Answer 4

Importe NavController en su app.component.ts y use el siguiente código.

import { NavController} from ''@ionic/angular'';
constructor( private nav: NavController ) {this.initializeApp();}
ngOnInit() {
this.plateform.backButton.subscribe(res => {
this.nav.goBack('''');
});
}

Answer 5

Una solución podría ser:

$ionicHistory.nextViewOptions({
disableBack: true,
historyRoot: true
});