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

使用＆＃34; back＆＃34;为动画写这个或＆＃34;转发＆＃34;：

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

好的，如果我需要提供的默认动画并且不是＆＃34;转发＆＃34;或者＆＃34;回来＆＃34;？

有一些方法：

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

Docs reference

Answer 4

为防止hideBackButton隐藏您的菜单图标，请在app.scss中使用此css：

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

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

Answer 5

您可以作为模式导航到该页面：

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

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

5 个答案:

1。这将提供默认动画

2。无论出于何种原因，不要将其设置为root