Ngx-translation不能跨ionic中的不同模塊作業

我想讓我的 ionic 應用程式支持多種語言。我創建了一項服務translate-config.service.ts，稱為根據用戶偏好獲取和設定語言的位置，并將所選語言存盤在本地存盤中。以下是我的服務

import { Injectable } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { Storage } from '@capacitor/storage';
export const APPLICATION_LANGUAGE = 'appLanguage';
@Injectable({
  providedIn: 'root'
})
export class TranslateConfigService {

  constructor(
    private translate: TranslateService
  ) { }

  getDefaultLanguage() {
    
    let language: string;
    Storage.get({ key: APPLICATION_LANGUAGE }).then(res => {
      console.log("Language from service: ", res.value);
      //if language not set then set default language as browser language
      if (res.value === null || res === null || language === null) {
        language = this.translate.getBrowserLang();
        this.translate.setDefaultLang("en");
      } else {
        language = res.value;
        console.log("language::", language);
        this.translate.setDefaultLang(language);
      }

    }).catch(error => {
      //if error occured then set browser lanauge as default language
      language = this.translate.getBrowserLang();
      this.translate.setDefaultLang(language);
    });
    return language;
  }

  //below method will be called by user action to load specific json file to change application language text
  setLanguage(setlanguage) {
    console.log(setlanguage);
    this.translate.use(setlanguage);

    //story this language in local storage
    Storage.set({ key: APPLICATION_LANGUAGE, value: setlanguage });
  }
}

在選擇語言組件 html 顯示帶有可用語言串列的下拉串列，我只是使用以下功能設定用戶選擇的語言

 languageChanged() {
    this.translateConfig.setLanguage(this.selectedLanguage);
  }

然后我創建了共享模塊，通過它我應該能夠跨多個模塊獲取語言，下面是我的共享模塊。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
//for transalation
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { TranslateConfigService } from '../../../app/services/translate-config.service';
import { HttpClient } from '@angular/common/http';

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


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    //for translation
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (LanguageLoader),
        deps: [HttpClient]
      }
    })
  ],
  providers: [
    TranslateConfigService
  ],
  exports: [
    TranslateModule
  ]
})
export class TransalationSharedModule { }

我已經在app.module.ts檔案中匯入了共享模塊，它作業正常app.component.html但我也有不同的模塊。例子Home.module.ts，Profile.module.ts。我在那里匯入了共享模塊，但它不起作用，甚至翻譯管道也沒有錯誤。

我做錯了什么或遺漏了什么嗎？

uj5u.com熱心網友回復：

據我了解，您必須進行一些更改

首先，您必須將您的翻譯匯入包代碼移動到app.module.ts檔案中

其次，我認為你啟用了延遲加載，所以在每個*.module.ts檔案中你必須匯入這個包import { TranslateModule } from '@ngx-translate/core' 其他邏輯部分看起來不錯

因此，一旦您完成了這些更改，那么您的代碼將看起來正確

樣本

app.module.ts

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

@NgModule({
  declarations: [
   ...
  ],
  imports: [   
 
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  entryComponents: [
    ...
  ],
  providers: [
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

其他.Module.ts

import { TranslateModule } from '@ngx-translate/core';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    TranslateModule
  ]
})
export class OtherModule { }

我希望你清楚，這個解決方案對你有用

標籤：有角度的 离子框架

上一篇：在NGRX狀態下保存snapshotChanges檔案會引發錯誤：無法凍結

下一篇：即使安裝了應用，Firebase動態鏈接也始終會轉到ios應用商店