Comment puis-je modifier le texte du bouton arrière et cliquer sur l'action pour une page spécifique dans IONIC 2+?

Question

J'ai trouvé que de nombreuses solutions ne reçoivent qu'une réponse partielle et qu'il est peut-être utile de combiner deux solutions en une réponse à la question posée ci-dessus: "Comment changer le texte du bouton arrière et cliquer sur une page spécifique? IONIC 2+? "

Answer 1

Cette question a été répondue ailleurs mais dans de nombreuses parties différentes, ce qui signifie qu'ils ne couvraient que "changer le texte" ou montrer comment effectuer une "action de clic personnalisé" pour le bouton arrière en utilisant diverses solutions. Cette réponse est principalement de combiner les deux pour présenter la solution la plus simple. Cette solution inclut également le bouton de retour physique des périphériques tels que Android et Windows. Les iPhones n'ont pas de bouton de retour.

Chaque fichier sera affiché ci-dessous dans son intégralité pour aider les développeurs juniors à voir l'image plus complète.

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/tableau de bord/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/fournisseurs/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(); 
    } 
    //*/ 
}