首页 > 解决方案 > 离子后退按钮不会动态更改文本

问题描述

使用配置设置后退按钮文本后,
它不会立即反映在导航栏中。
必须再次弹出并推送页面。

游乐场:
https ://stackblitz.com/edit/backbuttonbug 。
您可以在联系页面中看到,
设置后退按钮文本不会反映在自己页面甚至其他导航堆栈中

代码:
上一页:

export class AboutPage {  
  constructor(public navCtrl: NavController) {}

  contact() {  
    this.navCtrl.push(ContactPage);   
  }   
}

下一页:

export class ContactPage {  
  constructor(public navCtrl: NavController,
    public config: Config) {}

  toChinese() {
    this.config.set("backButtonText", '返回');
  }

  toEnglish() {
    this.config.set("backButtonText", 'back');
  }
}

<ion-header>
  <ion-navbar>
    <ion-title>
      Contact
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <button ion-button (tap)="toChinese()">toChinese</button>
  <button ion-button (tap)="toEnglish()">toEnglish</button>
</ion-content>  

我怀疑这是一个错误并打开了一个问题:
https ://github.com/ionic-team/ionic-v3/issues/976 。
并找到另一个类似的问题:
https ://github.com/ionic-team/ionic/issues/7043

那是离子错误/我的程序错误吗?
希望看到建议

标签: ionic-frameworkionic3

解决方案


您还没有添加任何代码,所以我不能 100% 确定您已经尝试过什么,但试试这个:

import { ViewController } from 'ionic-angular';

...

  ionViewDidEnter() {
    this.viewCtrl.setBackButtonText('Some dynamic button text');
  }

编辑

抱歉,没有看到您的 Stackblitz 示例,这是有效的:

import { Component } from '@angular/core';
import { NavController, Config, ViewController } from 'ionic-angular';

@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
export class ContactPage {

  constructor(public navCtrl: NavController,
    public config: Config, 
    private viewCtrl: ViewController) {

  }

  toChinese() {
    this.viewCtrl.setBackButtonText('返回');
  }

  toEnglish() {
    this.viewCtrl.setBackButtonText('Back');
  }

}

推荐阅读