Question

我仍在开发Ionic 4 Angular App。我知道，这仍然有些问题，但是我想在此版本中尝试一下。目前，我对“离子警报”感到困惑。我想使用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

这听起来像是时间问题以及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方法，然后对其进行处理来实现。令人敬畏的事物可以确保它在警报打开之前发生。

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

警报未显示翻译后的文本

2 个答案: