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

Question

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

在en.json中：

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

在fr.json中：

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

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

我想做点什么，以便在翻译路径为空时允许我使用法语。我知道如果我没有 home.test 路径，翻译可能会起作用，但我不想那样做。

是否可以让我在翻译路径为空的情况下使用法语？

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]
    }
  })
  ...
]

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

How can I know if an element is empty in my translation file in my html component?

translation

ngx-translate

angular