如何使用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可能对您有用。请记住，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>