網站搜尋

angular - ngx-translate 如何將翻譯文件的引用映射到任意一個模組,並在其他任何延遲加載模組中使用它們,而不需要多次下載


我的 Angular 應用程式有多個模組,每個模組都有自己的語言檔案,並且還有一些在整個應用程式中使用的共用元件,這些元件載入在 app.module.ts 檔案中。以下是程式碼

我正在使用 ngx-translate(core & http) 與 ngx-translate/multi-http-loader。

App.module.ts

export function createTranslateLoader(http: HttpClient) {
  return new MultiTranslateHttpLoader(http, [
    { prefix: './assets/i18n/app/', suffix: '.json' },
    { prefix: './assets/i18n/common/', suffix: '.json' },
    { prefix: './assets/i18n/common-components/', suffix: '.json' },
    { prefix: './assets/i18n/common-dialogs/', suffix: '.json' },
    { prefix: './assets/i18n/shared/', suffix: '.json' },
    { prefix: './assets/i18n/report-management/common/', suffix: '.json' }
  ]);
}

in importing

TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      },
      isolate: true
    }),

同樣地,我在其他模組中也分別使用 TranslateModule.forChild 創建了類似的設置,現在在我的其他模組組件中,當我嘗試使用我共用/共享組件的翻譯參考時,它們沒有出現。而當我像下面這樣在其他模組中聲明時,它們會被多次下載。

export function createTranslateLoader(http: HttpClient) {
  return new MultiTranslateHttpLoader(http, [
    {prefix: './assets/i18n/client-management/', suffix: '.json'},
    {prefix: './assets/i18n/common-components/', suffix: '.json'},
    {prefix: './assets/i18n/shared/', suffix: '.json'},
    { prefix: './assets/i18n/common-dialogs/', suffix: '.json' }
  ]);
}

in importing

TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      },
      isolate: true
    }),

現在我的問題是,那些常用的翻譯已經在 app.module 中聲明,當在其他模組中引用時卻沒有被調用,而當我在這個延遲加載的模組中再次聲明它們時,它們會被多次加載,一個實例來自 app.module,另一個來自延遲加載的模組。這不應該發生,因為它們已經通過 app.module 被調用了,為什麼在我的延遲加載模組中沒有出現呢。

有人能建議如何防止那些常見檔案被多次下載,並且一旦聲明後可以在多個模組中使用嗎?