Angular

Question

我在我的 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
    }
}))

Answer 1

我真的认为这应该用 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>

Answer 2

由于我找不到安全检查翻译是否存在的方法，我能做的最好的事情就是同步检查是否相等：

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

但是，I filed an issue with ngx-translate，求官方检查方法

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

进行测试

Answer 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

Angular - ngx-translate - 检查翻译密钥是否存在 Angular

Angular - ngx-translate - Checking if translate key exist with Angular

ngx-translate