Angular - ngx-translate - 检查 Angular 是否存在翻译键答案

【问题标题】：Angular - ngx-translate - Checking if translate key exist with AngularAngular - ngx-translate - 检查 Angular 是否存在翻译键
【发布时间】：2021-01-07 16:01:06
【问题描述】：

我在 Angular 应用程序中使用 ngx-translate。

我的 HTML 模板：

<span [ngClass]="(role === 'ADMIN') ? 'badge badge-danger' : 'badge badge-success'">{{ 'ADMIN.USER.ROLES.' + role | translate }}</span>

我的 i18n json 文件：

"ADMIN": {
  "USER": {
    "ROLES": {
      "ADMIN": "Administrator",
      "FOO": "Auditor FOO",
      "DOO": "Auditor DOO",
      "ROO": "Auditor ROO",
      "unknown": "Unknown"
    }
  }
}

如果我的角色是 BIPBIP，我想使用 'ADMIN.USER.ROLES.unknown' 键。

我正在寻找 HTML 模板解决方案（不是 Javascript）：

this._translateService.get("app.key").subscribe(res=>{
    if(...) {
        // message does not exist
    }
    else {
        // message exists
    }
}))

【问题讨论】：

标签： angular ngx-translate

【解决方案1】：

由于我没有办法安全地检查翻译是否存在，我能做的最好的事情就是同步检查相等性：

hasTranslation(key: string): boolean {
  const translation = this.translateService.instant(key);
  return translation !== key && translation !== '';
}

不过I filed an issue with ngx-translate，求官方的检查方法。

因此，对于您的模板，您可以使用 hasTranslation(x) ? ... : ... 进行测试

【讨论】：

【解决方案2】：

我真的认为这应该通过 JavaScript 中的函数来完成。假设您有一个名为ADMIN 的具有此映射的对象，您可以这样做。

<span [ngClass]="(role === 'ADMIN') ? 'badge badge-danger' : 'badge badge-success'">{{ this.ADMIN.USER.ROLES[role] ? 'ADMIN.USER.ROLES.' + role : 'ADMIN.USER.ROLES.unknown' | translate }}</span>

【讨论】：

@sgrillon 您必须在使用 HTML 模板的组件中将其创建为变量。它应该使用来自 i18n.json 的对象。
this.ADMIN 不存在
@sgrillon 我明白这一点。我告诉你用来自i18n.json 的信息创建一些东西。所以你需要在你的组件中创建 ADMIN 或任何你想调用它的东西。如果没有得到这些信息，这绝对是行不通的。
你使用 ngx-translate？
不，我实际上没有。我只是告诉你我将如何处理你提供的东西。您可以非常轻松地创建加载程序 (github.com/ngx-translate/core#write--use-your-own-loader)，但是您创建了仅 HTML 解决方案的约束。随我的回答去做。

【解决方案3】：

在 ngx-translate 中，如果翻译不存在，键的字符串将直接返回，所以试试这个：

{{ ('EQUIPMENT-TYPE' + equipment.type.name | translate) !== 'EQUIPMENT-TYPE' + equipment.type.name  ?  ('EQUIPMENT-TYPE' + equipment.type.name | translate) : equipment.type.name }}

感谢https://www.nuomiphp.com/eplan/en/390812.html

【讨论】：