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]
      }
  }) ],
})

默认选择的语言是英语。

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

我必须为此创建服务吗？

非常感谢您的帮助。

Answer 1

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

The pipe 'translate' could not be found error is showing In Ionic 4

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

它将解决您的查询。

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

1 个答案: