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

Question

我在Ionic 4应用程序中工作，在Ionic 4中使用多语言应用程序，我已经使用警报控制器来显示语言，但问题是当用户选择特定语言时如何更改语言。

这是我的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>

当我打开应用程序时，选择的默认语言是英语，我想根据用户从警报框中选择语言来更改语言。

我已经添加了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]
      }
  }) ],
})

默认选择的语言是英语。

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

是，我必须为此创建服务吗？

任何帮助深表感谢。

Answer 1

您也可以这样解决此问题。

在离子4中显示找不到管道“翻译”错误

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

它将解决您的查询。