web-dev-qa-db-ja.com

Ionic 2？で戻るボタンからラベルを変更する方法

コードで：

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

戻るボタンが有効になります。ただし、カスタマイズする必要があります（アイコンまたはラベル）。出来ますか？ docs/apiに何も見つかりません。

javascriptionic-frameworkionic2
17
Christian Benseler

ionic link 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',
  }
})

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以上、およびionic 3

ionic 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]
})
47
AishApp

IONIC2の現在のバージョンでは、戻るボタンのテキストをグローバルに変更できます。

IOSに表示されるようにアイコンを変更し、"Back"ラベルを非表示にすることもできます。

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

これをapp.module.tsに追加するだけです。

27
René Preisler

ViewController in Ionic 2。

ページのTypeScriptファイル内で、ViewControllerをインポートする必要があります

_import { ViewController } from 'ionic-angular';_

次に、コンストラクター関数にViewControllerを含めます。

constructor(public viewCtrl: ViewController) {}

最後に、関数を呼び出してテキストを変更できます。

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

私は基本的に、これまでアラートやNav Controllerの処理を行っていた方法からこれをまとめたので、間違っている可能性があります。それは私のために働いていますが、ページごとにテキストを変更できるという利点があります。

11
Adam Hughes

ionic 4を使用している場合、このような戻るボタンのテキストを設定できます

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

ここで公式ドキュメント https://ionicframework.com/docs/v3/api/config/Config/

ionic 3スターターアプリの使用例があります

App.component.tsのコストラクタでは、ion-angularのConfigオブジェクトの「set」メソッドが使用されます。

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);
1
raffaeleambrosio

これに関するドキュメントも見つかりませんでした。しかし、ボタンのテキストとクラスを設定するファイルを見つけたので、そこで編集できます（すべてのページでボタンのテキスト/クラスが変更されます）。

node_modules/ionic-framework/config/modes.jsの属性backButtonTextを変更します

0
akz92