Javascript 如何更改 Ionic 2 中后退按钮的标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35850685/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the label from back button in Ionic 2?
提问by Christian Benseler
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.
后退按钮已启用。但我需要自定义它（图标或标签）。是否可以？在 docs/api 中找不到任何内容。
回答by AishApp
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.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',
}
})
UPDATE in ionic 2 beta 8
离子 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',
});
UPDATE in ionic 2 rc.0 and up, as well as ionic 3
离子 2 rc.0 及更高版本以及离子 3 中的更新
In ionic 2 rc.0 and up, we need to include the configs in app.module.tsunder imports array.
在 ionic 2 rc.0 及更高版本中，我们需要在import数组下的app.module.ts 中包含配置。
@NgModule({
declarations: [
MyApp,
Home
],
imports: [
IonicModule.forRoot(MyApp, {
tabsPlacement: 'top',
backButtonText: 'Back'
})],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
Home ],
providers: [MyService]
})
回答by René Preisler
The current version of IONIC2 allows you to change the text of the back-button globally.
当前版本的 IONIC2 允许您全局更改后退按钮的文本。
You can also change the icon like it appears in ios and hide the "Back"label.
您还可以像在 ios 中一样更改图标并隐藏"Back"标签。
imports: [
IonicModule.forRoot(MyApp,{
backButtonText: '',
backButtonIcon: 'ios-arrow-back',
iconMode: 'md'
})
]
Just add this one to your app.module.ts.
只需将此添加到您的app.module.ts.
回答by Adam Hughes
I've just spent a while working out how to do this via the ViewControllerin Ionic 2.
我刚刚花了一段时间研究如何通过Ionic 2 中的ViewController做到这一点。
Inside the typescript file for your page you must import the ViewController
在页面的打字稿文件中，您必须导入 ViewController
import { ViewController } from 'ionic-angular';
import { ViewController } from 'ionic-angular';
Then in your constructor function include the ViewController.
然后在您的构造函数中包含 ViewController。
constructor(public viewCtrl: ViewController) {}
constructor(public viewCtrl: ViewController) {}
Then finally you can call the function to change the text.
最后，您可以调用该函数来更改文本。
ionViewDidLoad() {
this.viewCtrl.setBackButtonText('Cancel');
}
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.
我基本上是根据我一直在做的警报和导航控制器的东西拼凑起来的，所以我可能是错的。不过，它对我有用，并且好处是允许我在每页的基础上更改文本。
回答by Kabir
If you are using ionic 4 you can set back button text like this
如果您使用 ionic 4，您可以像这样设置后退按钮文本
<ion-back-button [text]="'<your text>'"></ion-back-button>
回答by raffaeleambrosio
Here official documentation https://ionicframework.com/docs/v3/api/config/Config/
这里官方文档https://ionicframework.com/docs/v3/api/config/Config/
there is a good example of usage in the ionic 3 starter app
在 ionic 3 starter 应用程序中有一个很好的用法示例
In costructor of app.component.ts is used "set" method used of Config object from ionic-angular:
在 app.component.ts 的 costructor 中使用了来自 ionic-angular 的 Config 对象的“set”方法：
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);
