Ionic 2 - 禁用特定视图的返回按钮

Question

我正在研究Ionic 2，想知道如何禁用特定视图的返回按钮。

我正在执行 this.nav.push(SomePage)，它可以正常工作，但是NavController 会自动放置一个返回按钮。如何禁用返回按钮？

注意：我知道可以使用this.nav.setRoot(SomePage)将SomePage设置为根视图而没有返回按钮，但这不提供NavController自动执行的有用的动画效果。

---

编辑：这个问题有点老了，但它引起了一些关注，因此我认为在未来提到另一个原因也很合适，即您可能不希望使用this.nav.setRoot来推送没有返回按钮的页面：它会清除预先存在的页面堆栈。因此，如果您仍然想在代码中返回上一页而不给用户提供UI方式进行操作，则setRoot将无法实现。

- naiveai

Answer 1

选项1

通过将hideBackButton属性添加到ion-navbar组件中，将其隐藏在视图中。

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

选项2

通过使用ViewController类提供的.showBackButton(bool)方法在页面类中隐藏它。

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

export class SubPage {

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

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

}

来自Ionic文档的评论：

请确保在ionViewWillEnter之后调用，以确保DOM已渲染。

注意

我想补充一点，这些选项并不考虑硬件返回按钮按下的情况。硬件返回按钮仍可能导致活动页面从导航栈中弹出。

- Will.Harris

---

感谢您告诉我。自第一个发布候选版以来，URL似乎已更改。 - Will.Harris

Answer 2

如果不是在根页面，Ionic2会隐藏菜单按钮并显示返回按钮。

如你所说，以下代码缺少动画效果：

this.view.setRoot(SomePage);

为“back”或“forward”编写动画：

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

---

好的，如果我需要提供的动画不是"forward"或"back"，而是默认的动画呢？

有几种方法：

1. 这将提供默认的动画

在您当前的页面中，写入：

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

---

2.不论什么原因都不要将其设为根目录

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

一些页面.html

<ion-header>
 <ion-navbar>
    <button menuToggle [hidden]="menuIsHidden">
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title></ion-title>
  </ion-navbar>
</ion-header>

我希望这能帮助到某个人。

- Stefan Rein

---

比答案更好的解决方案！this.nav.setRoot(SomePage, {}, {animate: true, direction: "forward"}); 对我来说完美地解决了问题。 - Oswald

Answer 3

您可以在Ionic 2.0.0-rc.6中使用以下属性装饰器。

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

文档参考

- 0x1ad2

Answer 4

为了防止hideBackButton隐藏你的菜单图标，请在app.scss中使用以下CSS：

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

或者，如果您希望在某个地方显示，而在其他地方不显示，请按以下方式更改选择器：ion-navbar[hidebackbutton].show-menu button[menutoggle]

- Sabri Aziri

Answer 5

您可以将页面作为模态窗口导航：

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

- Manu Valdés