时间戳

首页 > 解决方案 > 从服务器加载翻译时，Ionic ngx-translate 存储翻译以供离线访问

angular - 从服务器加载翻译时，Ionic ngx-translate 存储翻译以供离线访问

问题描述

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

从服务器加载翻译时，我希望它们存储，以便在设备离线时可以访问它。
如果第一次启动时没有互联网，它应该从资产文件夹中加载英文，但翻译加载器中的前缀是服务器的 URL，如下所示，

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

那么如何根据条件添加前缀呢？并存储翻译以供离线使用？我尝试在许多论坛上搜索，但没有找到任何合适的解决方案。

标签： angulartypescriptionic-frameworkngx-translate

解决方案

当从服务器获取翻译文件失败时，我们可以使用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];
  }
}

设置 missingTranslationHandler 提供程序

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

推荐阅读