Question

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

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

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

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

Answer 1

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

将语言文件存储在本地存储中

export class AppModule {
  constructor( translationService: TranslateService) {

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

    })
  }
}

missingTranslationHandler实现

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

设置缺少的TranslationHandler提供程序

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

Answer 2

先前的答案是为了兑现请求翻译文件，但在任何情况下我们都不使用本地文件，在这里，我们将像这样将静态语言json加载为语言翻译文件

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

missingTranslationHandler实现

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];
  }
}

设置缺少的TranslationHandler提供程序

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

  },
  ...
}

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

2 个答案: