如何使用 ngx-translate 实现组件插值？答案

【问题标题】：How can I achieve component interpolation with ngx-translate?如何使用 ngx-translate 实现组件插值？
【发布时间】：2020-02-19 21:57:26
【问题描述】：

我希望能够得到这个：

<p>Agree with the company's <a href="#" _target="blank">Terms and Conditions</a>.</p>

但没有在翻译文本中放置任何 HTML。

我的翻译文件应该包含以下键：

{
    "agreement": "Agree with company's {tc}"
    "terms": "Terms and Conditions"
}

我想要实现的目标与 Vue I18n 的 component interpolation 类似，我会在其中执行以下操作：

<i18n path="agreement" tag="p">
    <a place="tc" _target="blank">{{ translate('terms') }}</a>
</i18n>

ngx-translate 可以做到这一点吗？

谢谢。

【问题讨论】：

不确定我是否正确理解了您的问题。 {tc} 是您想要作为锚标记 href 属性传递的吗？
没有。 {tc} 是整个元素的占位符。
只是为了确保：你不能或不想简单地使用这样的东西：
{{ 'agreement' |翻译 }} {{ 'terms' |翻译 }}
很遗憾没有，因为在某些语言中，单词的顺序是不同的。这就是为什么“协议”翻译应该包含元素的占位符。

标签： angular ngx-translate

【解决方案1】：

希望有人能找到更好的解决方案，但与此同时，this 可能对您有用。请记住，setTranslation 中的所有内容都是您的 en.json 文件中的内容。我只是不想将它加载到 StackBlitz 中。我还依赖于您可以在示例中找到的sanitizeHtml。它基于这个 StackOverflow answer。

export class AppComponent  {

  private anchor;

    constructor(private translateService: TranslateService) {
        translateService.use('en');
        translateService.setTranslation('en', {
            HELLO: 'hello',
            AGREE: "Agree with company's {{ anchor }}",
            TC: "Terms and Conditions"
        });

        this.anchor = `<a href="#" _target="blank">${this.translateService.instant('TC')}</a>`
    }
}

<p [innerHTML]="'AGREE' | translate:{ anchor: anchor } | sanitizeHtml"></p>

【讨论】：

感谢详尽的回答，这似乎是一个很好的解决方案。