Angular 当从服务器加载翻译时，用于脱机访问的Ionic ngx translate存储翻译

我正在创建ionic4多语言应用程序。 所有翻译文件都来自服务器。

从服务器加载翻译时，我希望将其存储起来，以便在设备脱机时可以访问翻译。
如果第一次启动时没有internet，它应该从assets文件夹加载英语，但translation loader中的前缀是服务器的URL，如下所示，

export function HttpLoaderFactory(http: HttpClient, shared: SharedService) {
    return new TranslateHttpLoader(http, 'SERVER_URL', '.json');
}

那么如何根据条件添加前缀呢？ 以及存储翻译以供脱机使用？

---

我尝试在许多论坛上搜索，但没有找到任何合适的解决方案。

当missingTranslationHandler无法从服务器获取翻译文件时，我们可以使用missingTranslationHandler，第二部分是在本地存储中兑现翻译文件

兑现本地存储中的语言文件

export class AppModule {
  constructor( translationService: TranslateService) {

    ['en','tr','de'].forEach(lang => {
      translationService.getTranslation(lang).subscribe(res => {
        localStorage.setItem(lang,JSON.stringify(res))
      })

    })
  }
}

缺少TranslationHandler实现

export class MyMissingTranslationHandler implements MissingTranslationHandler {
  handle(params: MissingTranslationHandlerParams) {
    const currentLang =  params.translateService.currentLang;
    const langFile  = JSON.parse(localStorage.getItem(currentLang)) || {};
    return langFile[params.key];
  }
}

export class MyMissingTranslationHandler implements MissingTranslationHandler {
  handle(params: MissingTranslationHandlerParams) {
    const currentLang =  params.translateService.currentLang;
    switch (currentLang){
    case 'en': return en[params.key];
    case 'tr': return tr[params.key];      
    default  : return en[params.key];
  }
}

设置missingTranslationHandler提供程序

TranslateModule.forRoot({
  missingTranslationHandler: {
           provide: MissingTranslationHandler, useClass: MyMissingTranslationHandler
  },
  loader: {
    provide: TranslateLoader,
    useFactory: HttpLoaderFactory,
    deps: [HttpClient]
  }
})

TranslateModule.forRoot({
  missingTranslationHandler: {
           provide: MissingTranslationHandler, useClass: MyMissingTranslationHandler
  },
  loader: {
    provide: TranslateLoader,
    useFactory: HttpLoaderFactory,
    deps: [HttpClient]
  }
})

---

前面的回答是要兑现请求翻译文件，但我们在任何情况下都不使用本地文件，在这里，我们将以静态json的形式加载语言翻译文件，如下所示

import en from "src/assets/i18n/en.json";
import tr from "src/assets/i18n/tr.json";

缺少TranslationHandler实现

export class MyMissingTranslationHandler implements MissingTranslationHandler {
  handle(params: MissingTranslationHandlerParams) {
    const currentLang =  params.translateService.currentLang;
    const langFile  = JSON.parse(localStorage.getItem(currentLang)) || {};
    return langFile[params.key];
  }
}

export class MyMissingTranslationHandler implements MissingTranslationHandler {
  handle(params: MissingTranslationHandlerParams) {
    const currentLang =  params.translateService.currentLang;
    switch (currentLang){
    case 'en': return en[params.key];
    case 'tr': return tr[params.key];      
    default  : return en[params.key];
  }
}

设置missingTranslationHandler提供程序

TranslateModule.forRoot({
  missingTranslationHandler: {
           provide: MissingTranslationHandler, useClass: MyMissingTranslationHandler
  },
  loader: {
    provide: TranslateLoader,
    useFactory: HttpLoaderFactory,
    deps: [HttpClient]
  }
})

TranslateModule.forRoot({
  missingTranslationHandler: {
           provide: MissingTranslationHandler, useClass: MyMissingTranslationHandler
  },
  loader: {
    provide: TranslateLoader,
    useFactory: HttpLoaderFactory,
    deps: [HttpClient]
  }
})

对于加载器，这是一样的，你不需要改变任何东西

export function HttpLoaderFactory(http: HttpClient, shared: SharedService) {
    return new TranslateHttpLoader(http, 'SERVER_URL', '.json');
}

您将得到一个与resolveJsonModule未启用相关的错误

Cannot find module 'src/assets/i18n/en.json'. Consider using '--resolveJsonModule' to import module with '.json' extension

与此相关的另一个错误没有这样的默认导出

TS1192: Module '"D:/lab/src/assets/i18n/en"' has no default export.

刚刚在tsconfig.json中启用了这些选项

{
  ...
  "compilerOptions": {
    ...
    "resolveJsonModule": true,
    "esModuleInterop": true

  },
  ...
}

---

但是，我必须从服务器上获取的翻译又如何呢？@DivyeshSavaliya我发现缺少TranslationHandler是处理这个问题的唯一方法，但我需要有两个选项来加载语言。如果存储器中没有缓存的语言，并且internet不可用，请从/assets/i18n获取翻译，如果internet可用，然后从服务器获取。为什么应用程序启动将发出请求以获取翻译文件之后，翻译文件将存储在内存中这是ngx翻译的工作原理，因此即使互联网断开，翻译仍将工作，但这是针对当前会话的。下次离线时关闭和打开的应用程序是什么？它应该显示从服务器加载的最后一个翻译。一切都已正确完成。但是，文本仍然不会在脱机模式下显示。现在该怎么办？