頁面刷新后 Ngx-Translate 沒有得到翻譯

Question

我正在開發 Angular 13 應用程序，我遇到了 ngx-translate 的問題。 問題是，當我瀏覽項目時，我使用 TranslateService 獲得的翻譯工作正常，但每次我刷新頁面時，我使用 TranslateService 獲得的翻譯都沒有被翻譯。 這是我的代碼的模板（示例）：

getKeywords() {
this._translate.get([
  "keywords.keyword1",
  "keywords.keyword2",
  "keywords.keyword3",
]).subscribe(result => {
  this.keyword1Translation = result["keywords.keyword1"];
  this.keyword2Translation = result["keywords.keyword2"];
  this.keyword3Translation = result["keywords.keyword3"];
});

}

'_translate' 指的是我在組件的類構造函數中作為依賴項獲得的 TranslateService。 我嘗試調用在類構造函數中創建的 getKeywords() 方法，也嘗試在 ngOnInit 中調用它，但結果是一樣的。 當我在項目中導航時，翻譯會正確顯示，但是當我刷新當前頁面時，會顯示例如“keywords.keyword1”。

有想法該怎么解決這個嗎？

Answer 1

1. app.module.ts

    export function HttpLoaderFactory(httpClient: HttpClient) { return new TranslateHttpLoader(httpClient, 'assets/i18n/', '.json'); } export class TranslateHandler implements MissingTranslationHandler { handle(params: MissingTranslationHandlerParams) { /* some logic */ } } export function appInitializerFactory(translateService: TranslateService, injector: Injector): () => Promise<any> { // tslint:disable-next-line:no-any return () => new Promise<any>((resolve: any) => { const locationInitialized = injector.get(LOCATION_INITIALIZED, Promise.resolve(null)); locationInitialized.then(() => { translateService.use(localStorage.getItem("language") || window.navigator.language) // here u can change language loaded before reander enything .pipe(take(1)) .subscribe(() => {}, err => console.error(err), () => resolve(null)); }); }); } @NgModule({ imports: [ ..., TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: (HttpLoaderFactory), deps: [HttpClient] }, isolate: false, missingTranslationHandler: [{provide: MissingTranslationHandler, useClass: TranslateHandler}] }), ] providers: [ ..., { provide: APP_INITIALIZER, useFactory: appInitializerFactory, deps: [TranslateService, Injector], multi: true } ] }) export class AppModule {}

2. 在組件的模塊中添加TranslationModule

3. 在組件構造函數中public ts: TranslateService) {}

4. 現在你可以使用：

    this.ts.instant('YOUR_KEY'); // return translated string or your key if translation not founded, but u can change logic in TranslateHandler

5. 所有翻譯存儲在assets/i18n/中。 例如en.json