如何將單擊功能應用於警報控制器並更改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中顯示找不到管道“翻譯”錯誤

這是應用點擊功能和使用翻譯器的最佳方法。

它將解決您的查詢。