中安拓也のブログ

プログラミングについて書くブログ

Ionicで戻るボタンのラベルテキストを設定する

f:id:l08084:20180511165352p:plain Ionicのヘッダーについている戻るボタンのテキストの設定方法について

参考サイト

javascript - How to change the label from back button in Ionic 2? - Stack Overflow

バージョン情報

  • ionic-angular@3.9.2
  • Angular@5.2.10
  • Google Chrome バージョン: 60.0.3112.113

設定方法

戻るボタンのラベルについては、@NgModuleimports: []配列にIonicModule.forRoot(MyApp, { backButtonText: [追加したいテキスト文] })を追加してあげることで、設定できます。

src/app/app.module.ts:

@NgModule({
  declarations: [MyApp, HomePage, TabsPage, DetailPage, CartPage],
  imports: [
    BrowserModule,
    // add this!
    IonicModule.forRoot(MyApp, { backButtonText: "Backします" }),
    HttpClientModule,
    IonicStorageModule.forRoot()
  ],

上のコードでは、戻るボタンのラベルを、Backしますに設定しています。

動作確認

上記のコードをブラウザ上で動かしてみます。

f:id:l08084:20180511165352p:plain
iOSで動かした場合の表示

f:id:l08084:20180511165901p:plain
Androidでの表示