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

Question

我希望能够得到这个：

<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 实现吗？

谢谢。

Answer 1

希望有人能找到更好的解决方案，但与此同时，this might work for you. Keep in mind that everything inside setTranslation is what you would have in your en.json file. I just didn't want to load it in the StackBlitz. I'm also relying on a sanitizeHtml that you can find inside the example. It's based on this Whosebug 。

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>

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

How can I achieve component interpolation with ngx-translate?

ngx-translate

angular