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

问题描述

我正在使用我的 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 }}translate 管道，我必须在每个子模块中导入，import { TranslateService } from '@ngx-translate/core';但我认为这不好。

我必须为此创建服务吗？

任何帮助深表感谢。

标签： angularionic-frameworkionic4

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

问题描述

解决方案

推荐阅读