it-swarm.com.de

Ionic 2 - Deaktivieren der Zurück-Schaltfläche für eine bestimmte Ansicht

Also mache ich ein bisschen mit Ionic 2 herum, und ich möchte wissen, wie man den Zurück-Button für eine bestimmte Ansicht deaktiviert.

Was ich mache, ist this.nav.Push(SomePage); Es funktioniert, aber die NavController setzt automatisch einen Zurück-Button für mich. Wie deaktiviere ich die Zurück-Taste?

HINWEIS: Ich weiß, dass ich this.nav.setRoot(SomePage) verwenden kann, um SomePage als Root festzulegen und keine Schaltfläche "Zurück" zu haben. Dies bietet jedoch nicht die nützliche Animation, die NavController automatisch verwendet.


BEARBEITEN: Diese Frage ist etwas alt, aber sie hat einige Aufmerksamkeit erlangt. Ich denke, es wäre angebracht, zu erwähnen, dass es einen weiteren Grund gibt, aus dem Sie this.nav.setRoot nicht verwenden möchten, um eine Seite ohne Zurück-Taste zu drücken: es löscht den bereits vorhandenen Seitenstapel. Wenn Sie also weiterhin in der Lage waren, zur vorherigen Seite zurückzukehren, ohne dem Benutzer eine UI-Methode zur Verfügung zu stellen, lässt setRoot Sie dies nicht zu.

39
naiveai

Option 1

Blenden Sie es in der Ansicht aus, indem Sie das hideBackButton-Attribut zur ion-navbar-Komponente hinzufügen

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

Option 2

Blenden Sie es innerhalb der Seitenklasse aus, indem Sie die .showBackButton(bool)-Methode der ViewController-Klasse verwenden

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

export class SubPage {

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

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

}

Ein Kommentar aus der Ionic-Dokumentation

Stellen Sie sicher, dass Sie dies nach ionViewWillEnter aufrufen, um sicherzustellen, dass das DOM wurde gemacht.

Hinweis

Ich möchte nur hinzufügen, dass diese Optionen nicht berücksichtigt werden, wenn die Hardware-Zurück-Taste gedrückt wird. Die Schaltfläche "Zurück zum Hardware" führt wahrscheinlich immer noch dazu, dass die aktive Seite aus dem Nav-Stapel springt.

83
Will.Harris

Ionic2 verbirgt die Menüschaltfläche, wenn Sie sich nicht auf der Hauptseite befinden, und zeigt die Zurück-Schaltfläche.

Wie Sie gesagt haben, fehlt die Animation mit:

this.view.setRoot(SomePage);

Schreiben Sie dies für eine Animation mit "zurück" oder "vorwärts":

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

Okay, was ist, wenn ich die Standardanimation benötige, die bereitgestellt wird und nicht "vorwärts" oder "zurück" ist?

Es gibt einige Möglichkeiten:

1. Dadurch wird die Standardanimation bereitgestellt

Schreiben Sie in Ihre aktuelle Seite:

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

2. Setzen Sie es nicht aus irgendeinem Grund als root

this.view.Push(SomePage);

Okay, gut, jetzt müssen wir uns um die Dinge kümmern. 

  1. teil: Blenden Sie die Zurück-Taste aus 
  2. teil: Da die Seite nicht mehr das Stammverzeichnis ist, muss das normale Menüsymbol erneut angezeigt werden (sonst würde es nach dem Ausblenden der Zurück-Schaltfläche überhaupt kein Symbol geben).

Beachten Sie die menuIsHidden-Eigenschaft.

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>

Ich hoffe das hilft jemandem.

33
Stefan Rein

Sie können den folgenden Property Decorator in Ionic 2.0.0-rc.6 verwenden.

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

Referenzdokumente

6
0x1ad2

Um zu verhindern, dass hideBackButton Ihr Menüsymbol verbirgt, verwenden Sie diese css in Ihrem app.scss:

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

wenn Sie möchten, dass irgendwo gezeigt wird und nicht, ändern Sie Ihre Auswahl wie folgt: ion-navbar[hidebackbutton].show-menu button[menutoggle]

1
Sabri Aziri