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

Question

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

在en.json中:

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

在 fr.json 中:

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

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

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

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

Answer 1

您可以实现 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]
    }
  })
  ...
]