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

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

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

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

РЕДАКТИРОВАТЬ: этот вопрос несколько устарел, но он привлек некоторое внимание, поэтому я думаю, что было бы также уместно упомянуть для справки в будущем, что есть еще одна причина, по которой вы можете не использовать this.nav.setRoot, чтобы нажать страницу без кнопки возврата: он стирает уже существующую стопку страниц. Поэтому, если вы хотите иметь возможность вернуться на предыдущую страницу в коде, не предоставляя пользователю интерфейс для этого, setRoot не позволит вам это сделать.


angular ionic2 typescript1.8
person naiveai    schedule 18.05.2016    source источник

Ответы (5)


arrow_upward
86
arrow_downward

Вариант 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);
    }

}

Комментарий из Ionic docs

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

Примечание

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

person Will.Harris    schedule 18.05.2016
comment
Спасибо, что дал мне знать. Похоже, что URL-адрес изменился с момента первого релиз-кандидата. - person Will.Harris; 30.09.2016

arrow_upward
34
arrow_downward

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);

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

  1. часть: Скрыть кнопку возврата
  2. часть: поскольку страница больше не является корнем, нам нужно снова показать значок обычного меню (иначе после того, как кнопка «Назад» была просто скрыта, не было бы никакого значка).

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

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

person Stefan Rein    schedule 25.09.2016
comment
Лучшее решение, тогда ответь! this.nav.setRoot (SomePage, {}, {animate: true, direction: forward}); отлично работал у меня - person Oswald; 06.03.2018

arrow_upward
6
arrow_downward

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

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

Справочник по Документам

person 0x1ad2    schedule 27.01.2017

arrow_upward
1
arrow_downward

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

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

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

person Sabri Aziri    schedule 03.08.2017

arrow_upward
-2
arrow_downward

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

let modal = Modal.create(SomePage, navParams);
modal.onDismiss(datos => { 
//dissmiss callback 
});  
this.nav.present(modal );
person Manu Valdés    schedule 18.05.2016