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

5 回答

• -2

  Option 1

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

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

  Option 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 docs的评论

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

  Note

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

  回复于 2024-05-02T13:10:00+08:00
• 6

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

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

  • part：隐藏后退按钮

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

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

  回复于 2024-05-02T13:10:00+08:00
• 83

  您可以在 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

  回复于 2024-05-02T13:10:00+08:00
• 33

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

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

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

  回复于 2024-05-02T13:10:00+08:00
• 1

  您可以将模板导航到模板：

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

  回复于 2024-05-02T13:10:00+08:00