警报未显示翻译后的文本

Question

我仍在开发 Ionic 4 Angular 应用程序。我知道，这仍然有点问题，但我想在这个版本中尝试一下。目前我坚持使用 Ionic 的警报。我想使用 ngx Translateservice 将整个应用程序翻译成多种语言。除了警报外，这工作得很好。也许我应该改用弹出窗口？

我像几个教程所说的那样编写了自己的 Translateservice，它工作得很好。除警报中的文本外，所有文本均已翻译。他们甚至没有出现（见截图）

My Ionic info:
   Ionic CLI                     : 5.2.4 
   Ionic Framework               : @ionic/angular 4.7.4
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.0.0, ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 7 other plugins)

警报功能：

async alertConnetcToXY() {
    let text: any = {};
    this.translateService.get('Warning.Header').subscribe(a => {
      text.header = a;
    });
    this.translateService.get('Warning.Connect').subscribe(b => {
      text.message = b;
    });
    this.translateService.get('dontShowAgain').subscribe(c => {
      text.dontShowAgain = c;
    });
    this.translateService.get('yes').subscribe(d => {
      text.yes = d;
    });
    this.translateService.get('LoginScreen.login').subscribe(e => {
      text.login = e;
    });
    this.translateService.get('LoginScreen.register').subscribe(f => {
      text.register = f;
    });
    const alert = await this.alertController.create({
      header: text.header,
      message: text.message,
      inputs: [
        {
        type: 'checkbox',
        name: 'check',
        label: text.dontShowAgain,
        checked: false,
        handler: () => {
          this.storage.set('dontShowAgain', true); }
      }],
      buttons: [{
        text: text.yes,
        handler: () => {
          this.router.navigate(['/home']);
        }
      },
      {
        text: text.login,
        handler: () => {
          this.router.navigate(['/login']);
        }
      },
        {text: text.register,
          handler: () => {
            this.openRegistry();
          }
        }
          ]
    });
    await alert.present();
  }

像这样在没有按钮点击的情况下调用警报：

this.platform.ready().then(() => {
          this.alertConnect();
        });

我的en.json文件：

{ ...
    "Warning": {
        "Header": "Connect with xy",
        "Connect": "Are you sure that you don't want to connect with xy?",
        ...
    }
...
}

截图：https://drive.google.com/file/d/1-eNY85fCHNX4flbJgBI6_3-Ml013ZcSk/view?usp=sharing 屏幕截图预期：https://drive.google.com/file/d/1-THUDmtXU1GbD97dt62_sl2BKobKMp_1/view?usp=sharing

我预计文本会一直出现而不是随机出现...这是同步主题吗？

我也试过这样翻译文本：

const alert = await this.alertController.create({
      header: text.header = this.translateService.instant('Warning.loesdauConnectHeader'),
      message: text.message = this.translateService.instant('Warning.loesdauConnect'),
...

Answer 1

这听起来像是对 i18n json 文件的 HTTP 调用的时间和响应问题。

尝试将您的订阅切换到 NGX Translate 提供的 instant() 调用。

示例：

text.header = this.translateService.instant('Warning.Header');
text.message = this.translateService.instant('Warning.Connect');
text.dontShowAgain = this.translateService.instant('dontShowAgain');
text.yes = this.translateService.instant('yes');
text.login = this.translateService.instant('LoginScreen.login');
text.register = this.translateService.instant('LoginScreen.register');

关于使用 Instant 的信息：

Gets the instant translated value of a key (or an array of keys). /!\ This method is synchronous and the default file loader is asynchronous. You are responsible for knowing when your translations have been loaded and it is safe to use this method. If you are not sure then you should use the get method instead.

Answer 2

当您打开警报时，翻译尚未加载。您需要先等待翻译。您可以通过将一组翻译键传递给 .get 方法，然后处理它们来做到这一点。 awating 确保它在警报打开之前发生。

const text = await this.translateService.get([
  'Warning.Header',
  'Warning.Connect',
  'dontShowAgain',
  'yes',
  'LoginScreen.login',
  'LoginScreen.register'
]).pipe(
  map(([header, message, dontShowAgain, yes, login, register]) =>
    ({ header, message, dontShowAgain, yes, login, register }))
).toPromise();

// now open alert

警报未显示翻译后的文本

Alert isn't showing the translated Text

alert

translation

angular

ionic4