如何使用 ngx-translate 更新當前語言？

Question

我正在使用 Electron 10 和 Angular 10 並且還使用ngx-translate 。 用戶在下拉菜單中切換語言后，我想更新當前視圖/頁面的翻譯。

在開發過程中，我當然使用 Angular 及其 HTTP 服務器，這就是我使用HttpLoaderFactory的原因。 但對於生產構建，我使用自定義translateFactory ，它通過TranslateUniversalLoader加載 JSON 文件。 這樣可以嗎？

無論是在開發還是生產構建中，我都無法在不重新啟動應用程序的情況下更新字符串。 我有一個下拉菜單，在更改時我只是調用this.translate.use(lang) 。 是否應該重新加載視圖？ 這里的預期行為是什么？

我按如下方式注冊模塊：

export class TranslateUniversalLoader implements TranslateLoader {
       
  constructor() {
  }

  public getTranslation(lang: string): Observable<any> {
      return of(TRANSLATIONS[lang]);
    }
  }
  
  export function translateFactory() {
    return new TranslateUniversalLoader();
  }
}
...

@NgModule({
  declarations: [AppComponent],
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: isProductionBuild() ? translateFactory : HttpLoaderFactory,
        deps: [HttpClient]
      },
      isolate : false
    })

Answer 1

我認為你是從類似 lazyload 的子模塊調用this.translate.use(lang)的，這些子模塊沒有注入到導入TranslateModule的根模塊中。 要從 lazyload 模塊調用它，請創建一個名為LanguageService的服務：

@Injectable({ providedIn: 'root' })
export class LanguageService {
   language$ = new BehaviorSubject(null);

   applyLang(lang: string) {
      this.language$.next(lang);
   }
}

並觀察app.component.ts中的language$變化：

...
export class AppComponent {
   constructor(private languageService: LanguageService, private translate: TranslateService) {
      this.languageService.language$.subscribe(lang => {
          if (lang) {
              this.translate.use(lang); // Use lang here
          }
      });
   }
}

現在您可以使用 LanguageService 更改任何延遲加載模塊的語言。

...
constructor(private languageService: LanguageService) {}

updateLanguage() {
   this.languageService.applyLang('en'); // Call from components belonging to lazyload modules
}

否則，通過直接從 LanguageService 調用 translate.use 來簡化流程。

@Injectable({ providedIn: 'root' })
export class LanguageService {
   constructor(private translate: TranslateService) {}

   applyLang(lang: string) {
      this.translate.use(lang);
   }
}