Angular ngx-translate - 检查翻译键是否直接存在于 HTML 模板中

Question

我想使用 ngx-translate 和 | translate 管道翻译 Angular HTML 模板中的一些值。目前我的代码如下所示：

<div>
{{equipment.type.name}}
</div>

其中 equipment 是来自 component.ts 的对象。所以只显示设备类型的名称。

我想实现的是翻译这些类型的设备，所以我在我的 i18n json 文件中添加了一些翻译：

  "EQUIPMENT-TYPE": {
    "chair": "Chair",
    "table": "Table",
  }

我修改了我的 HTML 模板如下：

<div>
{{'EQUIPMENT-TYPE' + equipment.type.name | translate}}
</div>

它确实有效，但只有在将翻译添加到 i18n json 文件时才有效。

我的问题是：是否可以检查 json 文件中是否存在特定的翻译密钥，如果不存在，只显示设备类型的名称？

下面的代码不起作用，它总是尝试翻译密钥，即使它不存在：

<div>
{{ ('EQUIPMENT-TYPE' + equipment.type.name) ?  ('EQUIPMENT-TYPE' + equipment.type.name | translate) : equipment.type.name }}
</div>

Answer 1

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

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

如果翻译不存在，translateService 将直接 return 字符串，所以

 this.translateService.instant('stringToBeTranslated') is equal to stringToBeTranslated// it does not exist

但是当你把它添加到你的 json

'stringToBeTranslated': "test"

this.translateService.instant('stringToBeTranslated) is equal to test

Angular ngx-translate - 检查翻译键是否直接存在于 HTML 模板中

Angular ngx-translate - check if translation key exists directly in HTML template

translation

ngx-translate

angular