温馨提示:本文翻译自stackoverflow.com,查看原文请点击:Angular ngx-translate - check if translation key exists directly in HTML template
angular ngx-translate translation

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

发布于 2020-12-25 15:39:16

我想使用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文件中是否存在特定的转换密钥,如果不存在,则仅使用设备类型的名称进行dsplay?

下面的代码不起作用,即使它不存在,它也会始终尝试转换密钥:

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

查看更多

提问者
Kamil
被浏览
0
Fateh Mohamed 2020-06-26 16:34

在ngx-translate中,如果翻译不存在,则将直接撤消键的字符串,因此请尝试以下操作:

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

如果翻译不存在,那么translateService将直接返回字符串,因此

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

但是当您将其添加到json中时

'stringToBeTranslated': "test"

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