美文网首页
ionic3中返回键的处理

ionic3中返回键的处理

作者: masecho | 来源:发表于2018-07-02 17:45 被阅读0次

1、在APP.components.ts中注册全局按钮返回事件(安卓的返回键)

1.1、注册返回事件

Platform.ready().then(() => {
  Platform.registerBackButtonAction(()=>{
    this.backButton();
  },999);
});

1.2、返回事件

 backButton()  {
    // modal层,loading层,toast层消失
    let activePortal = this.ionicApp._modalPortal.getActive() || this.ionicApp._loadingPortal.getActive() || this.ionicApp._overlayPortal.getActive() ;
    if (activePortal) {
      activePortal.dismiss().catch(() => {});
      activePortal.onDidDismiss(() => {});
      return;
    }
    let activeNav:NavController = this.appCtrl.getActiveNav();
    let activeVC = activeNav.getActive();
    let page = activeVC.instance;
    
    //页面跳回rootpage
    if (page instanceof ExWarehousingPage) {
      activeNav.popToRoot();
      return;
    }

   
    if (activeNav.canGoBack()) {
    //返回上一页
      activeNav.pop();
    } else {
     //rootpage退出APP
      this.backButtonProvider.showExit();
    }
}

2、在实际页面中操作返回按钮(导航返回按钮)

2.1、视图标注ExWarehousingPage

<ion-navbar  color="navbar-bg-color" #Navbar>

2.2、页面ts中返回按钮事件改写

 @ViewChild(Navbar) navBar: Navbar;
   //返回按钮
  ionViewDidLoad(){
    this.navBar.backButtonClick = this.backButtonClick;
  }

  backButtonClick():void{
    this.navCtrl.popToRoot();
  }

相关文章

网友评论

      本文标题:ionic3中返回键的处理

      本文链接:https://www.haomeiwen.com/subject/nviluftx.html