如何处理离子2上的返回按钮

答

我是这样做的：

在每个页面组件，我创建了一个名为backButtonAction()功能，这将执行自定义代码的每一页。

代码：

import { Component } from '@angular/core'; 
import { Platform, NavController, ModalController } from 'ionic-angular'; 
import { DetailsModal } from './details'; 

@Component({ 
    selector: 'page-appointments', 
    templateUrl: 'appointments.html' 
}) 
export class AppointmentsPage { 
    modal: any; 

    constructor(private modalCtrl: ModalController, public navCtrl: NavController, public platform: Platform) { 
     // initialize your page here 
    } 

    backButtonAction(){ 
     /* checks if modal is open */ 
     if(this.modal && this.modal.index === 0) { 
      /* closes modal */ 
      this.modal.dismiss(); 
     } else { 
      /* exits the app, since this is the main/first tab */ 
      this.platform.exitApp(); 
      // this.navCtrl.setRoot(AnotherPage); <-- if you wanted to go to another page 
     } 
    } 

    openDetails(appointment){ 
     this.modal = this.modalCtrl.create(DetailsModal, {appointment: appointment}); 
     this.modal.present(); 
    } 
}

而在app.component.ts，我用platform.registerBackButtonAction方法注册一个回调将被调用每次单击后退按钮。在它内部，我检查功能backButtonAction是否存在于当前页面中，并调用它，如果它不存在，则转到主/第一个选项卡。

如果不需要为每个页面执行自定义操作，可以简化此操作。你可以弹出或退出应用程序。

我这样做是因为我需要检查模式是否在此特定页面上打开。

代码：

platform.registerBackButtonAction(() => { 
    let nav = app.getActiveNav(); 
    let activeView: ViewController = nav.getActive(); 

    if(activeView != null){ 
     if(nav.canGoBack()) { 
     nav.pop(); 
     }else if (typeof activeView.instance.backButtonAction === 'function') 
     activeView.instance.backButtonAction(); 
     else nav.parent.select(0); // goes to the first tab 
    } 
    });

如果当前页面是第一个选项卡，应用程序关闭（如在backButtonAction方法定义）。

+0

让nav = app.getActiveNav（）; **这是什么应用程序** –

+1

它是一个'App'组件的实例，从'ionic-angular'导入 –

+0

我我在我的项目中使用选项卡和sidemenu上述答案工作正常，除了sidemenu部分，当我去页面窗体sidemenu我无法导航回来我收到组件名称作为主页，即使我在其他页面时我去侧面菜单中的一些页面，我没有看到标签是这个somthing导致错误任何帮助如何导航到主页（tabspage） –

答

按离子2 RC.4文档从here：

您可以使用Platform API的registerBackButtonAction(callback, priority)方法注册在后退按钮按下的动作。

当用户按下本地平台的后退按钮（也称为“硬件”后退按钮）时，会触发后退按钮事件。此事件仅用于在Android和Windows平台上运行的Cordova应用程序。此事件不会在iOS上触发，因为iOS不具有与Android或Windows设备相同的硬件后退按钮。

注册硬件后退按钮操作并设置优先级允许应用程序控制在按下硬件后退按钮时应调用哪个操作。此方法决定哪些已注册的后退按钮操作具有最高优先级并应该被调用。

参数：

回调：功能当按下后退按钮被调用时，如果该注册行为具有最高优先级。
优先：设置此操作的优先级的编号。只有最高优先级才会执行。默认为0

返回：功能：，调用它时，将注销后退按钮操作的功能。

答

我能够在我们简单的设置页面根的情况下做到这一点...

import {Component, ViewChild, Injector} from '@angular/core'; 
import {Platform, MenuController, Nav, App, IonicApp, NavController} from 'ionic-angular'; 
import {StatusBar} from '@ionic-native/status-bar'; 
import {SplashScreen} from '@ionic-native/splash-screen'; 
import {InvitesPage} from "../pages/invites/invites"; 
import {RewardsPage} from "../pages/rewards/rewards"; 
import {ConnectionsPage} from "../pages/connections/connections"; 
import {MessagesPage} from "../pages/messages/messages"; 
import {ResourcesPage} from "../pages/resources/resources"; 
import {SignoutPage} from "../pages/signout/signout"; 
import {DashboardPage} from "../pages/dashboard/dashboard"; 
import {AccountPage} from "../pages/account/account"; 
import {HomePage} from "../pages/home/home"; 
import {TriviaPage} from "../pages/trivia/trivia"; 
import {Events} from "ionic-angular/util/events"; 


@Component({ 
    templateUrl: 'app.html' 
}) 
export class MyApp { 
    @ViewChild(Nav) nav: NavController; 
    // make HelloIonicPage the root (or first) page 

    public rootPage: any; //if logged in, go to dashboard. 
    public pages: Array<{title: string, component: any}>; 
    public user: any; 
    public routeHistory: Array<any>; 

    constructor(public platform: Platform, 
       public menu: MenuController, 
       public statusBar: StatusBar, 
       public splashScreen: SplashScreen, 
       private _app: App, 
       private _ionicApp: IonicApp, 
       private _menu: MenuController, 
       protected injector: Injector, 
       public _events: Events) { 

    this.initializeApp(); 

    // set our app's pages 
    this.pages = [ 
     {title: 'My Account', component: AccountPage}, 
     {title: 'Dashboard', component: DashboardPage}, 
     {title: 'Invites', component: InvitesPage}, 
     {title: 'Rewards', component: RewardsPage}, 
     {title: 'Connections', component: ConnectionsPage}, 
     {title: 'Messages', component: MessagesPage}, 
     {title: 'Resources', component: ResourcesPage}, 
     {title: 'Trivia', component: TriviaPage}, 
     {title: 'Sign Out', component: SignoutPage} 

    ]; 

    this.routeHistory = []; 
    this.user = {firstName: ''}; 

    } 

    initializeApp() { 

    this.platform.ready().then(() => { 

     this._setupBrowserBackButtonBehavior(); 

     let self = this; 
     if (sessionStorage.getItem('user')) { 
     this.user = JSON.parse(sessionStorage.getItem('user')); 
     self.rootPage = TriviaPage; 
     } else { 
     self.rootPage = HomePage; 
     } 

     this.routeHistory.push(self.rootPage); 
     // Okay, so the platform is ready and our plugins are available. 
     // Here you can do any higher level native things you might need. 
     this.statusBar.styleDefault(); 
     this.splashScreen.hide(); 
    }); 
    } 

    openPage(page) { 
    // close the menu when clicking a link from the menu 
    this.menu.close(); 
    // navigate to the new page if it is not the current page 
    this.nav.setRoot(page.component); 
    //store route history 
    this.routeHistory.push(page.component); 
    } 


    private _setupBrowserBackButtonBehavior() { 

    // Register browser back button action(s) 
    window.onpopstate = (evt) => { 

     // Close menu if open 
     if (this._menu.isOpen()) { 
     this._menu.close(); 
     return; 
     } 

     // Close any active modals or overlays 
     let activePortal = this._ionicApp._loadingPortal.getActive() || 
     this._ionicApp._modalPortal.getActive() || 
     this._ionicApp._toastPortal.getActive() || 
     this._ionicApp._overlayPortal.getActive(); 

     if (activePortal) { 
     activePortal.dismiss(); 
     return; 
     } 

     if (this.routeHistory.length > 1) { 
     this.routeHistory.pop(); 
     this.nav.setRoot(this.routeHistory[this.routeHistory.length - 1]); 
     } 


    }; 

    // Fake browser history on each view enter 
    this._app.viewDidEnter.subscribe((app) => { 
     if (this.routeHistory.length > 1) { 
     history.pushState(null, null, ""); 
     } 

    }); 

    } 
}

答

离子最新3.xx版app.component.ts文件import { Platform, Nav, Config, ToastController} from 'ionic-angular';

constructor(public toastCtrl: ToastController,public platform: Platform) { 
platform.ready().then(() => { 
     //back button handle 
     //Registration of push in Android and Windows Phone 
     var lastTimeBackPress=0; 
     var timePeriodToExit=2000; 

    platform.registerBackButtonAction(() => { 
    // get current active page 
     let view = this.nav.getActive(); 
    if(view.component.name=="TabsPage"){ 
        //Double check to exit app     
        if(new Date().getTime() - lastTimeBackPress < timePeriodToExit){ 
         this.platform.exitApp(); //Exit from app 
        }else{ 
         let toast = this.toastCtrl.create({ 
          message: 'Press back again to exit App?', 
          duration: 3000, 
          position: 'bottom' 
          }); 
          toast.present();  
          lastTimeBackPress=new Date().getTime(); 
        } 
    }else{ 
     // go to previous page 
       this.nav.pop({}); 
    } 
    }); 

}); 

}

答

我找到了最简单的方法，只需在中添加如下代码：

this.platform.registerBackButtonAction((event) => { 
    let activePortal = this.ionicApp._loadingPortal.getActive() || 
    this.ionicApp._modalPortal.getActive() || 
    this.ionicApp._toastPortal.getActive() || 
    this.ionicApp._overlayPortal.getActive(); 
    if(activePortal && activePortal.index === 0) { 
     /* closes modal */ 
     activePortal.dismiss(); 
    } else { 
     if(this.nav.getActive().name == 'Homepage') { // your homepage 
      this.platform.exitApp(); 
     } 
     else { 
      if(this.nav.canGoBack()) 
       this.nav.pop(); 
      this.nav.setRoot(Homepage); 
     } 
    } 
},101);

这就是它！ 无需在每个页面上添加额外的代码！

答

我用这里和其他来源的答案来完成我所需要的。我注意到，当你建立生产（--prod）应用这种方法是行不通的，因为JS uglifying和简化：

this.nav.getActive().name == 'PageOne'

正因为如此，我在“如果”语句中使用下一个：

view.instance instanceof PageOne

所以最终的代码如下所示：长期搜索后

this.platform.ready().then(() => { 

    //Back button handling 
    var lastTimeBackPress = 0; 
    var timePeriodToExit = 2000; 
    this.platform.registerBackButtonAction(() => { 
    // get current active page 
    let view = this.nav.getActive(); 
    if (view.instance instanceof PageOne) { 
     if (new Date().getTime() - lastTimeBackPress < timePeriodToExit) { 
      this.platform.exitApp(); //Exit from app 
     } else { 
     let toast = this.toastCtrl.create({ 
      message: 'Tap Back again to close the application.', 
      duration: 2000, 
      position: 'bottom', 
     }); 
     toast.present();  
     lastTimeBackPress = new Date().getTime(); 
     } 
    } else if (view.instance instanceof PageTwo || view.instance instanceof PageThree) { 
     this.openPage(this.pages[0]); 
    } else { 
     this.nav.pop({}); // go to previous page 
    } 
    }); 
});

答

最佳实践的解决方案。

它的工作原理100％，并在真实设备

this.Platform.registerBackButtonAction(() => { 
 
      // try to dismiss any popup or modal 
 
      console.log("Back button action called"); 
 

 
      let activePortal = this.ionicApp._loadingPortal.getActive() || 
 
      this.ionicApp._modalPortal.getActive() || 
 
      this.ionicApp._toastPortal.getActive() || 
 
      this.ionicApp._overlayPortal.getActive(); 
 

 
      if (activePortal) { 
 
      // ready = false; 
 
      activePortal.dismiss(); 
 
      activePortal.onDidDismiss(() => { }); 
 

 
      console.log("handled with portal"); 
 
      return; 
 
      } 
 

 
      // try to close the menue 
 

 
      if(this.MenuController.isOpen()){ 
 
      this.closeMenu(); 
 
      return; 
 
      } 
 
      else if(this.nav.canGoBack()){ 
 
      this.nav.pop(); 
 
      return; 
 
      }else{ 
 

 
      let activePage = this.nav.getActive().instance; 
 

 
      let whitelistPages = [LoginPage, HomePage]; 
 

 
      // if current page is not in whitelistPage 
 
      // then back to home or login page first 
 
      if (whitelistPages.indexOf(activePage.constructor) < 0) { 
 
       this.nav.setRoot(this.userLoggedIn ? HomePage : LoginPage); 
 

 
       return; 
 
      }else if(whitelistPages.indexOf(activePage.constructor) > 0){ 
 
       this.AppUtilities.showConfirm("Exit","Are you want to exist the app ? ").subscribe(
 
       ()=>{ 
 
        this.Platform.exitApp(); 
 
       }, 
 
       ()=>{} 
 
      ) 
 
      }else{ 
 
       console.error('cannot handel back button') 
 
      } 
 

 

 
      } 
 

 
     });

答

我有轻微的不同的方法与@amr阿卜杜勒阿齐兹比较测试它。我使用setTimeout来控制返回或退出。希望这会为实现后退按钮提供另一种选择。

initBackButtonBehaviour() { 
 
    this.platform.registerBackButtonAction(() => { 
 
     console.log("Back button pressed"); 
 
     if (this.readyToExit) { 
 
     this.platform.exitApp(); 
 
     return; 
 
     } 
 

 
     let activePortal = this.ionicApp._loadingPortal.getActive() || 
 
     this.ionicApp._modalPortal.getActive() || 
 
     this.ionicApp._toastPortal.getActive() || 
 
     this.ionicApp._overlayPortal.getActive(); 
 

 
     if (activePortal) { 
 
     activePortal.dismiss(); 
 
     activePortal.onDidDismiss(() => { }); 
 

 
     return; // stop any further action after closing any pop up modal or overlay 
 
     } 
 

 
     if (this.menuCtrl.isOpen()) { 
 
     this.menuCtrl.close(); 
 
     return; // stop any further action after menu closed 
 
     } 
 
     else if (this.nav.canGoBack()) { 
 
     this.nav.pop(); 
 
     return; // stop any further action after navigation pop 
 
     } 
 
     else { 
 
     let activePage = this.nav.getActive().instance; 
 

 
     let whiteListPages = [HomePage]; 
 

 
     // if current page is not in whitelistPage 
 
     // then back to home or login page first 
 
     if (whiteListPages.indexOf(activePage.constructor) < 0) { 
 
      this.nav.setRoot(HomePage); 
 

 
      return; 
 
     } else if (whiteListPages.indexOf(activePage.constructor) >= 0) { 
 
      this.utils.showToast('Press back button again to exit', 1500); 
 

 
      this.readyToExit = true; 
 
      setTimeout(() => { 
 
      this.readyToExit = false; 
 
      }, 1500); 
 

 
     } else { 
 
      console.error('cannot handle back button'); 
 
     } 
 

 
     } 
 
    }, 101);

如何处理离子2上的返回按钮

相关推荐