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

Question

我发现许多解决方案只能部分回答，尽管将两个解决方案合并为一个与上述问题相关的答案可能会有用："How can I change the back button text and click action for a specific page in IONIC 2+?"

Answer 1

这个问题在其他地方得到了回答，但在许多不同的部分，这意味着他们只涵盖了 "changing the text" 或展示了如何使用各种解决方案为后退按钮执行 "custom click action"。这个答案主要是将两者结合起来展示最简单的解决方案。该解决方案还包括基于 Android 和 Windows 的手机等设备的物理后退按钮。 iPhone 没有后退按钮。

下面将完整显示每个文件，以帮助初级开发人员更全面地了解情况。

src/app/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/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/pages/dashboard/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/providers/navigation/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();
  }
  //*/
}

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

How can I change the back button text and click action for a specific page in IONIC 2+?

back-button

ionic2