Ionic 2 - Отключение кнопки возврата для определенного вида

Итак, я немного разбираюсь в Ionic 2, и я хочу знать, как отключить кнопку "Назад" для определенного вида.

То, что я делаю, это this.nav.push(SomePage); Он работает, но NavController автоматически помещает туда кнопку возврата. Как отключить кнопку "Назад"?

ПРИМЕЧАНИЕ. Я знаю, что я могу использовать this.nav.setRoot(SomePage), чтобы установить SomePage как root и не иметь кнопку "Назад", но это не обеспечивает полезную анимацию, которая автоматически выполняет NavController.

EDIT: этот вопрос несколько стар, но он привлек некоторое внимание, поэтому я думаю, что было бы целесообразно упомянуть для будущей ссылки, что есть еще одна причина, по которой вы, возможно, не захотите использовать this.nav.setRoot, чтобы нажать страницу без кнопки "Назад": он удаляет существующий стек страниц. Поэтому, если вы хотите по-прежнему вернуться к предыдущей странице в коде, не предоставляя пользователю способ пользовательского интерфейса, setRoot не позволит вам это сделать.

Ответ 1

Вариант 1

Скрыть его в представлении, добавив атрибут hideBackButton к компоненту ion-navbar

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

Вариант 2

Скрыть его из класса страницы с помощью метода .showBackButton(bool), предоставленного классом ViewController

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

export class SubPage {

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

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

}

Комментарий Ионные документы

Обязательно вызовите это после ionViewWillEnter, чтобы убедиться, что DOM.

Примечание

Я хотел бы добавить, что эти параметры не учитываются при нажатии кнопки возврата оборудования. Кнопка "Назад" аппаратного обеспечения по-прежнему, вероятно, заставит активную страницу появляться в стеке навигации.

Ответ 2

Ionic2 скрывает кнопку меню, если вы не находитесь на корневой странице и показывает кнопку "Назад" .

Как вы сказали, анимация отсутствует:

this.view.setRoot(SomePage);

Запишите это для анимации с "назад" или "вперед":

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

Хорошо, что, если мне нужна анимация по умолчанию, которая предоставляется и не является "прямой" или "обратной"?

Есть несколько способов:

1. Это обеспечит анимацию по умолчанию

На текущей странице напишите:

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

2. Не устанавливайте его как root по любой причине

this.view.push(SomePage);

Хорошо, теперь нам нужно позаботиться о вещах.

: Скрыть кнопку "Назад"
part: Поскольку страница больше не является корнем, нам нужно снова показать значок обычного меню (иначе не было бы никакой иконки вообще после того, как просто спрятал бы кнопку "Назад" ).

Обратите внимание на свойство 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>

Надеюсь, это поможет кому-то.

Ответ 3

Вы можете использовать следующий Property Decorator в Ionic 2.0.0-rc.6

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

Ответ 4

Чтобы предотвратить hideBackButton, чтобы скрыть значок вашего меню, используйте этот css в app.scss:

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

или если вы хотите, чтобы где-то отображались, а где-то нет, измените свой селектор следующим образом: ion-navbar[hidebackbutton].show-menu button[menutoggle]

Ответ 5

Вы можете перейти на страницу как модальный:

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