时间戳

首页 > 解决方案 > ngx-translate angular5 自定义元素

angular - ngx-translate angular5 自定义元素

问题描述

我正在尝试翻译一个应用程序，其中jointjs用于创建元素。如果自定义元素模板包含 ex:{{ 'EXAMPLE' | translate }}则显示为{{ 'EXAMPLE' | translate }}且不翻译。在 ngx-translate 完成之前有没有生成组件的解决方案？谢谢

编辑 具有ElementBuilder与jointjs一起构建的TS类，具有TS类的元素使用ExampleElement继承自ElementBuilder ExampleElement模板的HTML模板：{{ 'EXAMPLE' | translate }}未翻译。

尝试 1：向构造函数添加TranslateService，并在调用ExampleElementtranslateService 时传递。没有变化，没有翻译

标签： angularangular5jointjsngx-translate

解决方案

例如，您可以在资产中的某处创建一个文件夹并进入您需要哪种语言的文件夹，然后在 ts 文件中调用 ngx-translate

这是我所做的翻译的一个例子。资产中的代码

英文文件需要是json文件

{
  "button": {
    "#save": "Save",
    "#cancel": "Cancel"
}
}

德国语

{
  "button": {
    "#save": "Speichern",
    "#cancel": "Abbrechen"
  }
}

您需要在 TS 文件的构造函数中定义

constructor(private translate: TranslateService) {}

html代码

<button matTooltip="{{'button.#add' | translate}}" matTooltipPosition="below">&nbsp;
</button>

推荐阅读