Question

使用代码：

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

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

Answer 1

您可以在离线链接http://ionicframework.com/docs/v2/api/config/Config

中提及的app.html中设置按钮文字

@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 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',
});

离子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>

Answer 5

我也没有找到任何相关的文档。但是我找到了设置文本和按钮类的文件，因此您可以在那里进行编辑（它将更改每个页面中的按钮文本/类）。

更改backButtonText

中的属性node_modules/ionic-framework/config/modes.js

Answer 6

此处是官方文档https://ionicframework.com/docs/v3/api/config/Config/

ionic 3入门应用程序中有一个很好的用法示例

在app.component.ts的构造函数中，使用了来自ionic-angular的Config对象的“设置”方法：

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

当您要使用国际化或要动态更改配置时有用：

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

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

6 个答案: