Ionic 2 - 禁用特定视图的后退按钮

Question

所以我在Ionic 2上乱七八糟,我想知道如何禁用特定视图的后退按钮.

我正在做的是this.nav.push(SomePage);它有效,但会NavController自动为我提供一个后退按钮.如何禁用后退按钮？

注意:我知道我可以使用this.nav.setRoot(SomePage)将SomePage设置为root并且没有后退按钮,但是这不提供NavController自动执行的有用动画.

---

编辑:这个问题有些陈旧,但它引起了一些关注,所以我认为提及将来参考还有另一个原因你可能不想使用this.nav.setRoot以推送没有后退按钮的页面:擦除预先存在的一叠页面.因此,如果您仍希望能够在不向用户提供UI方式的情况下返回代码中的上一页,则setRoot不允许您这样做.

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

}

来自Ionic docs的评论

请务必在ionViewWillEnter之后调用此方法以确保已呈现DOM.

注意

我只想补充一点,当按下硬件后退按钮时,这些选项不会被考虑在内.硬件后退按钮仍可能导致活动页面从导航堆栈弹出.

Answer 2

如果您不在根页面上并显示后退按钮,Ionic2会隐藏菜单按钮.

如你所说,动画缺少:

this.view.setRoot(SomePage);

用"后退"或"前进"为动画写这个:

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

好的,如果我需要提供的默认动画并且不是"前进"或"后退"怎么办？

有一些方法:

这将提供默认动画

在您当前的页面中,写下:

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

2.出于任何原因,不要将其设置为root

this.view.push(SomePage);

好的,现在我们需要照顾一下观点.

1. part:隐藏后退按钮
2. 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>

我希望这会对某人有所帮助.

Answer 3

您可以在Ionic 2.0.0-rc.6中使用以下Property Decorator

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

文件参考