Ionic 2 - Désactiver le bouton retour pour une vue spécifique

Question

Je m'amuse donc un peu avec Ionic 2 et je voudrais savoir comment désactiver le bouton retour pour une vue spécifique.

Ce que je fais, c'est this.nav.push(SomePage); Cela fonctionne, mais le NavController met automatiquement un bouton retour pour moi. Comment désactiver le bouton retour ?

NOTE : Je sais que je peux utiliser this.nav.setRoot(SomePage) pour définir la SomePage comme Root et ne pas avoir de bouton de retour, mais cela ne fournit pas l'animation utile que l'option NavController le fait automatiquement.

---

EDIT : Cette question est un peu ancienne, mais elle a attiré l'attention, donc je pense qu'il serait également approprié de mentionner pour référence future qu'il y a une autre raison pour laquelle vous ne voulez peut-être pas utiliser this.nav.setRoot afin de pousser une page sans bouton retour : il efface la pile de pages préexistante. Donc, si vous voulez être en mesure de revenir à la page précédente dans le code sans donner à l'utilisateur un moyen de le faire dans l'interface utilisateur, setRoot ne vous permettrait pas de le faire.

Answer 1

Option 1

Masquez-le dans la vue en ajoutant l'élément hideBackButton de l'attribut ion-navbar composant

<ion-navbar hideBackButton="true">
    <ion-title>Sub Page</ion-title>
</ion-navbar>

Option 2

Masquez-le à l'intérieur de la classe de la page en utilisant l'attribut .showBackButton(bool) fournie par la méthode ViewController classe

import { NavController, ViewController } from 'ionic-angular';

export class SubPage {

    constructor(public navCtrl: NavController, private viewCtrl: ViewController) { }

    ionViewWillEnter() {
        this.viewCtrl.showBackButton(false);
    }

}

Un commentaire de la Documentation Ionic

Assurez-vous d'appeler ceci après ionViewWillEnter pour être sûr que le DOM a été rendu.

Note

Je voudrais juste ajouter que ces options ne tiennent pas compte du moment où le bouton arrière du matériel est pressé. Le bouton de retour matériel est toujours susceptible de faire sortir la page active de la pile de navigation.

Answer 2

Ionic2 cache le bouton de menu, si vous n'êtes pas sur la page racine et affiche le bouton de retour.

Comme vous l'avez dit, l'animation manque avec :

this.view.setRoot(SomePage);

Ecrivez ceci pour une animation avec "arrière" ou "avant" :

this.nav.setRoot(SomePage, {}, {animate: true, direction: "forward"});

---

Ok, et si j'ai besoin de l'animation par défaut qui est fournie et qui n'est pas "avant" ou "arrière" ?

Il y a quelques moyens :

1. Cela fournira l'animation par défaut

Dans votre page actuelle, écrivez :

this.nav.insert(0, SomePage).then(() => {
    this.nav.popToRoot();
});

---

2. Ne le définissez pas comme Root pour une raison quelconque.

this.view.push(SomePage);

Ok, bien, maintenant nous devons nous occuper d'une vue des choses.

1. partie : Cacher le bouton retour
2. partie : Parce que la page n'est plus la racine, nous devons afficher à nouveau l'icône normale du menu (sinon il n'y aurait pas d'icône du tout après avoir simplement caché le bouton retour).

Remarquez le menuIsHidden propriété.

export class SomePage {
    // Part 2:
    menuIsHidden: boolean = false;

    constructor(private nav: NavController, private view: ViewController) {}

    // ionic2 will call this automatically
    ionViewWillEnter() {
        // Part 1:
        this.view.showBackButton(false);
    }
}

somePage.html

<ion-header>
 <ion-navbar>
    <button menuToggle [hidden]="menuIsHidden">
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title></ion-title>
  </ion-navbar>
</ion-header>

J'espère que cela aidera quelqu'un.

Answer 3

Vous pouvez utiliser les éléments suivants Décorateur immobilier sur Ionic 2.0.0-rc.6

  <ion-header>
    <ion-navbar hideBackButton="true">
      <ion-title>
        Your page title
      </ion-title>
    </ion-navbar>
  </ion-header>

Référence aux documents

Answer 4

Afin d'éviter hideBackButton pour masquer l'icône de votre menu, utilisez cette css dans votre app.scss :

ion-navbar[hidebackbutton] button[menutoggle] {
  display: block !important;
}

ou dans le cas où vous voulez qu'un endroit soit affiché et un autre non, changez votre sélecteur comme suit : ion-navbar[hidebackbutton].show-menu button[menutoggle]

Answer 5

Vous pouvez naviguer vers la page comme une modale :

let modal = Modal.create(SomePage, navParams);
modal.onDismiss(datos => { 
//dissmiss callback 
});  
this.nav.present(modal );