我希望能够获得这个:
<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可以吗?
谢谢。
答案 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>