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

Question

所以我正在使用 Ionic 2，我想知道如何禁用特定视图的后退按钮。

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

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

编辑：这个问题有点老了，但它已经引起了一些关注，所以我认为也应该提一下以供将来参考，你可能不想使用 this.nav.setRoot 的另一个原因是为了推送没有后退按钮的页面：它会擦除预先存在的页面堆栈。因此，如果您希望在不给用户 UI 方法的情况下仍然能够返回代码中的上一页，setRoot 不允许您这样做。

Answer 1

您可以以模式导航到页面：

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

Answer 2

选项 1

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

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

选项 2

使用 ViewController class

提供的 .showBackButton(bool) 方法在页面 class 中隐藏它

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

export class SubPage {

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

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

}

来自 Ionic docs

的评论

Be sure to call this after ionViewWillEnter to make sure the DOM has been rendered.

备注

我只想补充一点，按下硬件后退按钮时不会考虑这些选项。硬件后退按钮仍然可能导致活动页面从导航堆栈中弹出。

Answer 3

Ionic2 hides the menu button, if you are not on the root page and shows the back button.

如您所说，动画缺失：

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。不要出于任何原因将其设置为 root

this.view.push(SomePage);

好吧好吧，现在我们需要处理视图的事情。

部分：隐藏后退按钮
部分：因为页面已经不是根目录了，所以需要再次显示普通的菜单图标（否则隐藏后退按钮后根本就没有任何图标）。

注意 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 4

您可以在Ionic 2.0.0-rc.6

中使用以下属性Decorator

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

Docs reference

Answer 5

为了防止 hideBackButton 隐藏您的菜单图标，请在 app.scss:

中使用此 css

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

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

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

Ionic 2 - Disabling back button for a specific view

ionic2

typescript1.8

angular

1。这将提供默认动画

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