ngx-translate angular5 自定义元素答案

【问题标题】：ngx-translate angular5 custom elementsngx-translate angular5 自定义元素
【发布时间】：2018-09-27 21:15:31
【问题描述】：

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

编辑具有 TS 类 ElementBuilder，它与关节 elemet 一起构建具有 HTML 模板 ExampleElement 的 TS 类，该模板继承自 ElementBuilder 在 ExampleElement 的模板中使用了：{{ 'EXAMPLE' | translate }}，没有翻译。

尝试 1：在构造函数中添加了TranslateService，并且在调用ExampleElement 时传递了 translateService。没有变化，没有翻译

【问题讨论】：

您应该添加与 ngx-translate 相关的代码部分，例如我们可以看到您如何导入 TranslateModule、注入 TranslateService 等的部分，以及您使用jointjs 的部分（至少是您创建导致问题的元素的块。

标签： angular angular5 jointjs ngx-translate

【解决方案1】：

例如，您可以在资产中的某处创建一个文件夹并进入您需要的语言文件夹，然后在 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>

【讨论】：