web-dev-qa-db-fra.com

Ionic 2 - Désactivation du bouton Précédent pour une vue spécifique

Donc, je déconne un peu avec Ionic 2 , et je veux savoir comment désactiver le bouton Précédent pour une vue spécifique.

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

NOTE: Je sais que je peux utiliser this.nav.setRoot(SomePage) pour définir la SomePage en tant que racine et ne pas avoir de bouton Précédent, mais cela ne fournit pas l'animation utile que NavController fait automatiquement.

EDIT: Cette question est un peu ancienne, mais elle a attiré une certaine attention. Je pense donc qu’il serait également approprié de mentionner pour référence ultérieure qu’il existe une autre raison pour laquelle vous ne souhaitez peut-être pas utiliser this.nav.setRoot afin de pousser une page sans bouton Précédent: il efface la pile de pages préexistante. Donc, si vous vouliez toujours pouvoir revenir à la page précédente dans le code sans donner à l'utilisateur un moyen de le faire, setRoot ne vous permettrait pas de le faire.

angularionic2typescript1.8
39
naiveai

Option 1

Cachez-le dans la vue en ajoutant l'attribut hideBackButton au composant ion-navbar

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

Option 2

Cachez-le dans la classe de page en utilisant la méthode .showBackButton(bool) fournie par la classe ViewController

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 Ionic Docs

Assurez-vous d'appeler cela après ionViewWillEnter pour vous assurer que le DOM a été rendu.

Remarque

J'aimerais juste ajouter que ces options ne prennent pas en compte lorsque le bouton de retour du matériel est enfoncé. Le bouton de retour du matériel est toujours susceptible de faire sortir la page active de la pile de navigation.

83
Will.Harris

Ionic2 masque le bouton de menu, si vous ne vous trouvez 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 "back" ou "forward":

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

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

Il y a quelques façons:

1. Ceci 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 racine pour une raison quelconque

this.view.Push(SomePage);

Bon d'accord, maintenant nous devons prendre soin de voir les choses. 

  1. partie: cache le bouton de retour 
  2. partie: comme la page n’est plus la racine, nous devons à nouveau afficher l’icône du menu normal (sinon, il ne resterait aucune icône après avoir caché le bouton Précédent).

Notez la propriété menuIsHidden.

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.

33
Stefan Rein

Vous pouvez utiliser le Property Decorator suivant dans 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 de la documentation

6
0x1ad2

Afin d'éviter que hideBackButton ne masque votre icône de menu, utilisez ce css dans votre app.scss:

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

ou au cas où vous voudriez que quelque chose soit montré ou pas, changez votre sélecteur comme suit: ion-navbar[hidebackbutton].show-menu button[menutoggle]

1
Sabri Aziri