如何更改后退按钮文本并单击IONIC 2+中特定页面的操作？

Question

我发现许多解决方案只是在部分答案，尽管将两种解决方案合并为一个与上述问题相关的答案可能很有用：“如何更改后退按钮文本并单击某个特定页面的操作IONIC 2+？“

Answer 1

这个问题在其他地方得到了回答，但在许多不同的部分，这意味着他们只使用各种解决方案涵盖“更改文本”或显示如何为后退按钮执行“自定义点击操作”。这个答案主要是将两者结合起来展示最简单的解决方案。该解决方案还包括Android和Windows手机等设备的物理后退按钮。 iPhone没有后退按钮。

每个文件将全部显示在下面，以帮助初级开发人员看到更全面的图片。

的src /应用/ app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { ErrorHandler, NgModule } from '@angular/core'; 
import { IonicApp, IonicErrorHandler, IonicModule, Navbar, NavController, AlertController } from 'ionic-angular'; 
import { SplashScreen } from '@ionic-native/splash-screen'; 
import { StatusBar } from '@ionic-native/status-bar'; 

import { MyApp } from './app.component'; 
import { HomePage } from '../pages/home/home'; 
import { DashboardPage } from '../pages/dashboard/dashboard'; 
import { SitesPage } from '../pages/sites/sites'; 
import { NavigationProvider } from '../providers/navigation/navigation'; 

@NgModule({ 
    declarations: [ 
    MyApp, 
    HomePage, 
    DashboardPage, 
    SitesPage 
    ], 
    imports: [ 
    BrowserModule, 
    IonicModule.forRoot(MyApp) 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp, 
    HomePage, 
    DashboardPage, 
    SitesPage 
    ], 
    providers: [ 
    StatusBar, 
    SplashScreen, 
    {provide: ErrorHandler, useClass: IonicErrorHandler}, 
    NavigationProvider 
    ] 
}) 
export class AppModule {} 

的src /应用/ app.component.ts

import { Component } from '@angular/core'; 
import { Platform } from 'ionic-angular'; 
import { StatusBar } from '@ionic-native/status-bar'; 
import { SplashScreen } from '@ionic-native/splash-screen'; 
import { NavigationProvider } from '../providers/navigation/navigation'; 

import { HomePage } from '../pages/home/home'; 
@Component({ 
    templateUrl: 'app.html' 
}) 
export class MyApp { 
    rootPage:any = HomePage; 


    constructor(private platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private navProvider: NavigationProvider) { 
    platform.ready().then(() => { 
     // Okay, so the platform is ready and our plugins are available. 
     // Here you can do any higher level native things you might need. 

     platform.registerBackButtonAction(() => { 
     this.navProvider.backButtonAction(); 
     }); 

     statusBar.styleDefault(); 
     splashScreen.hide(); 
    }); 
    } 
} 

的src /页/仪表板/ dashboard.ts

import { Component, ViewChild } from '@angular/core'; 
import { IonicPage, NavController, NavParams, ViewController, Navbar } from 'ionic-angular'; 
import { SitesPage } from '../sites/sites'; 
import { NavigationProvider } from '../../providers/navigation/navigation'; 

@IonicPage() 
@Component({ 
    selector: 'page-dashboard', 
    templateUrl: 'dashboard.html', 
}) 
export class DashboardPage { 
    @ViewChild(Navbar) navBar: Navbar; 

    constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController, public navProvider: NavigationProvider) {} 

    ionViewDidLoad() { 
    this.viewCtrl.setBackButtonText('Logout'); 

    this.navBar.backButtonClick =() => { 
     this.navProvider.backButtonAction(); 
    }; 
    } 

    sites() { 
    this.navCtrl.push(SitesPage); 
    } 
} 

SRC /提供商/导航/ navigation.ts

import { Injectable } from '@angular/core'; 
import { Platform, NavController, AlertController } from 'ionic-angular'; 
import { App } from "ionic-angular/index"; 

@Injectable() 
export class NavigationProvider { 

    logoutAlert: any = null; 
    exitAppAlert: any = null; 
    private navCtrl: NavController; 

    constructor(private platform: Platform, private app: App, private alertCtrl: AlertController) { 
    //get the nav controller which is only ready when the platform is ready 
    platform.ready().then(() => { 
     this.navCtrl = app.getActiveNavs()[0]; 
    }); 
    } 

    //* perform the back button action 
    backButtonAction() { 
    // can we pop this page? 
    if(this.navCtrl.canGoBack()) { 
     // are we on the page that we want to trigger the logout alert? 
     const view = this.navCtrl.getActive(); 
     if(view.component.name == 'DashboardPage') { 
     // is the logout alert still visible? 
     if(this.logoutAlert) { 
      // dismiss it instead :) 
      this.logoutAlert.dismiss(); 
      this.logoutAlert = null; 
     } else { 
      // show the logout alert 
      this.logoutAlertAction(); 
     } 
     } else { 
     //pop the page to perform default back action 
     this.navCtrl.pop(); 
     } 
    } else { 
     // we are at the root page so the next step is to exit the app 
     // is the exit app alert still visible? 
     if(this.exitAppAlert) { 
     // dismiss it instead :) 
     this.exitAppAlert.dismiss(); 
     this.exitAppAlert = null; 
     } else { 
     this.exitAppAlertAction(); 
     } 
    } 
    } 
    //*/ 

    //* prompt the user before logging out 
    logoutAlertAction() { 
    this.logoutAlert = this.alertCtrl.create({ 
     title: 'Logout', 
     message: 'Are you sure you want to log out?', 
     buttons: [ 
     { 
      text: 'No', 
      role: 'cancel', 
      handler:() => { 
      // don't do anything 
      } 
     }, 
     { 
      text: 'Yes', 
      handler:() => { 
      // clear sessions or do something to log the user out before popping the page 
      this.navCtrl.pop(); 
      } 
     } 
     ] 
    }); 
    this.logoutAlert.present(); 
    } 
    //*/ 

    //* prompt the user before exiting the application 
    exitAppAlertAction() { 
    this.exitAppAlert = this.alertCtrl.create({ 
     title: 'Exit Application', 
     message: 'Are you sure you want to exit the app?', 
     buttons: [ 
     { 
      text: 'Yes', 
      handler:() => { 
      // exit the application 
      this.platform.exitApp(); 
      } 
     }, 
     { 
      text: 'No', 
      role: 'cancel', 
      handler:() => { 
      // don't do anything 
      this.exitAppAlert = null; 
      } 
     } 
     ] 
    }); 
    this.exitAppAlert.present(); 
    } 
    //*/ 
}