时间戳

首页 > 解决方案 > 如何知道我的 html 组件的翻译文件中的元素是否为空？

angular - 如何知道我的 html 组件的翻译文件中的元素是否为空？

问题描述

我使用 ngx-translate，创建文件：en.json和fr.json以便翻译法语和英语。

在en.json 中：

{
    "home": {
        "test": ""
    }
}

在fr.json 中：

{
    "home": {
        "test": "Testons"
    }
}

用户浏览器语言为英语 (en)，但默认网站语言为法语。

如果翻译路径为空，我想做一些事情以允许我使用法语。我知道如果我没有home.test path 翻译可以工作，但我不想这样做。

即使翻译路径为空，是否可以允许我使用法语？

标签： angulartranslationngx-translate

解决方案

你可以实施TranslateLoader改变来做你想做的事。

例如，这个从文件中删除空字符串（当然，您可以根据需要对其进行调整）：
my-translate-loader.ts

export class MyTranslateLoader implements TranslateLoader {
  constructor(
    private http: HttpClient,
    private prefix: string = '/assets/i18n/',
    private suffix: string = '.json') {
  }

  public getTranslation(lang: string): any {
    return this.http.get(`${this.prefix}${lang}${this.suffix}`)
      .pipe(map(result => this.process(result)));
  }

  private process(object: object) {
    return Object.keys(object)
      .filter(key => object.hasOwnProperty(key) && object[key] !== '')
      .reduce((result, key) => (result[key] = typeof object[key] === 'object' ? this.process(object[key]) : object[key], result), {});
  }
}

然后在您的app.module.ts文件中，更改以下内容：

// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient) {
  return new MyTranslateLoader(http);
             ^^^^^^^^^^^^^^^^^
}

假设您已经像这样配置了模块导入：

imports: [
  TranslateModule.forRoot({
    loader: {
      provide: TranslateLoader,
      useFactory: HttpLoaderFactory,
      deps: [HttpClient]
    }
  })
  ...
]

推荐阅读