如何将点击功能应用于警报控制器并更改 Ionic 4 中的语言

Question

我在我的 Ionic 4 应用程序中工作，我在 Ionic 4 中开发多语言应用程序，我使用警报控制器来显示语言，但问题是当用户 select是特定的语言。

这是我的app.component.ts:

language: any = 'en';
constructor(private translate: TranslateService) {
    this.initializeApp();
}

initializeApp() {
   this.platform.ready().then(() => {
    this.translate.addLangs(['en', 'fr']);
    this.translate.setDefaultLang('en');
    const browserLang = this.translate.getBrowserLang();
    this.translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
   });
}

 async changeLanguage() {
    const alert = await this.alertController.create({
      header: 'Language',
      inputs: [{
        type: 'radio',
        label: 'English',
        value: 'en',
        checked: this.language === 'en'
      }, {
        type: 'radio',
        label: 'French',
        value: 'fr',
        checked: this.language === 'fr'
      }],
      buttons: [{
        text: 'Cancel'
      }, {
        text: 'OK',
        handler: selectedLanguage => {
          this.language = selectedLanguage;
        }
      }]
    });
    await alert.present();
  }

这是我的app.component.html:

<button ion-button icon-end (click)="changeLanguage()">
    <span>{{language | uppercase }}</span>
    <ion-icon name="arrow-dropdown"></ion-icon>
</button>

当我打开应用程序时，默认语言 selected 是英语，我想根据用户更改语言 select 警告框的语言。

我添加了 ngx-translate 插件。

这是我的app.module.ts:

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, './assets/i18n/', '.json');
}

@NgModule({
  imports: [
    TranslateModule.forRoot({
      loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
      }
  }) ],
})

默认 selected 语言是英语。

在 html 中使用 {{ 'ACCOUNT_TAB_LAB' | translate }} 翻译管道，我必须在每个子模块中导入 import { TranslateService } from '@ngx-translate/core';，但我认为这不好。

我必须为此创建服务吗？

非常感谢任何帮助。

Answer 1

你也可以这样解决这个问题。

这是应用点击功能和使用翻译器的最佳方式。

它将解决您的问题。

如何将点击功能应用于警报控制器并更改 Ionic 4 中的语言

How to apply the click function to alert controller and change the language in Ionic 4

ionic-framework

angular

ionic4