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

时间:2019-10-23 15:36:54

标签: angular ngx-translate

我希望能够获得这个:

<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可以吗?

谢谢。

1 个答案:

答案 0 :(得分: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>