警报未显示翻译后的文本

Question

我仍在开发 Ionic 4 Angular 应用程序。我知道，这仍然有点错误，但我想在这个版本中尝试一下。 目前我被离子警报困住了。 我想使用 ngx 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

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

尝试将您的订阅切换到 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 的信息：

获取键（或键数组）的即时转换值。 /!\ 这个方法是同步的，默认的文件加载器是异步的。您有责任知道您的翻译何时已加载，并且使用此方法是安全的。如果你不确定，那么你应该使用 get 方法。

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