How to change the label from back button in Ionic

问题:

With the code:

<ion-navbar *navbar>
</ion-navbar>

the back button is enabled. But I need to customize it (the icon or the label). Is it possible? Can't find anything in the docs/api.

回答1:

you can set back button text in your app.html as mentioned in the ionic link http://ionicframework.com/docs/v2/api/config/Config

@App({
  template: `<ion-nav [root]="root"></ion-nav>`
  config: {
    backButtonText: 'Go Back',
    iconMode: 'ios',
    modalEnter: 'modal-slide-in',
    modalLeave: 'modal-slide-out',
    tabbarPlacement: 'bottom',
    pageTransition: 'ios',
  }
})

UPDATE in ionic 2 beta 8

import {ionicBootstrap} from 'ionic-angular';

ionicBootstrap(AppRoot, customProviders, {
  backButtonText: 'Go Back',
  iconMode: 'ios',
  modalEnter: 'modal-slide-in',
  modalLeave: 'modal-slide-out',
  tabbarPlacement: 'bottom',
  pageTransition: 'ios',
});

UPDATE in ionic 2 rc.0 and up, as well as ionic 3

In ionic 2 rc.0 and up, we need to include the configs in app.module.ts under imports array.

@NgModule({   
 declarations: [
    MyApp,
    Home   
 ],   
 imports: [
    IonicModule.forRoot(MyApp, {
      tabsPlacement: 'top',
      backButtonText: 'Back'
     })],
 bootstrap: [IonicApp],
 entryComponents: [
    MyApp,
    Home   ],
 providers: [MyService]
})

回答2:

The current version of IONIC2 allows you to change the text of the back-button globally.

You can also change the icon like it appears in ios and hide the "Back" label.

imports: [
    IonicModule.forRoot(MyApp,{
      backButtonText: '',
      backButtonIcon: 'ios-arrow-back',
      iconMode: 'md'
    })
]

Just add this one to your app.module.ts.

回答3:

I've just spent a while working out how to do this via the ViewController in Ionic 2.

Inside the typescript file for your page you must import the ViewController

import { ViewController } from 'ionic-angular';

Then in your constructor function include the ViewController.

constructor(public viewCtrl: ViewController) {}

Then finally you can call the function to change the text.

ionViewDidLoad() { this.viewCtrl.setBackButtonText('Cancel'); }

I basically cobbled this together from how I'd been doing Alerts and Nav Controller stuff so I may be wrong. It's working for me though and has the benefit of allowing me to change the text on a per page basis.

回答4:

If you are using ionic 4 you can set back button text like this

<ion-back-button [text]="'<your text>'"></ion-back-button>

回答5:

I didn't find any documentation for this either. But I have found the file that sets the text and the class of the button, so you can edit it there (it will change the button text/class in every page).

Change the attribute backButtonText in node_modules/ionic-framework/config/modes.js

回答6:

Here official documentation https://ionicframework.com/docs/v3/api/config/Config/

there is a good example of usage in the ionic 3 starter app

In costructor of app.component.ts is used "set" method used of Config object from ionic-angular:

this.config.set('ios', 'backButtonText', values.BACK_BUTTON_TEXT);

Is usefull when you want to use internationalization or if you want change configs dynamically:

this.translate.get(['BACK_BUTTON_TEXT']).subscribe(values => {
  this.config.set('ios', 'backButtonText', values.BACK_BUTTON_TEXT);