如何更改Ionic 2中后退按钮的标签？

Question

随着代码:

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

后退按钮已启用.但我需要自定义它(图标或标签).可能吗？在docs/api中找不到任何内容.

Answer 1

您可以在app.html中设置按钮文本,如离子链接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',
  }
})

在离子2β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',
});

在离子2 rc.0及以上更新,以及离子3

在离子2 rc.0及更高版本中,我们需要在进口数组下的app.module.ts中包含配置.

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

Answer 2

当前版本的IONIC2允许您全局更改后退按钮的文本.

您还可以更改ios中显示的图标并隐藏"Back"标签.

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

只需将此添加到您的app.module.ts.

Answer 3

我刚刚花了一些时间通过Ionic 2中的ViewController来解决这个问题.

在页面的打字稿文件中,您必须导入ViewController

import { ViewController } from 'ionic-angular';

然后在你的构造函数中包含ViewController.

constructor(public viewCtrl: ViewController) {}

最后你可以调用函数来改变文本.

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

我基本上拼凑了这个,因为我一直在做警报和导航控制器的东西,所以我可能错了.它虽然对我有用,但它的好处是允许我在每页的基础上更改文本.

Answer 4

如果您使用的是ionic 4，则可以像这样设置后退按钮文本

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