javascript - Angular 7 中的动态变量编译

Question

我需要使用 Angular 7 在 HTML 模板中实现动态变量编译。

这是我的示例代码:

应用程序组件.ts:

username = 'User Name';
sampleData = "This is my <strong>{{username}}</strong>";

应用程序组件.html:

<div [innerHtml]="sampleData"></div>

但是，输出仍然是

This is my {{username}}.

我的预期输出是，

This is my UserName

使用 $compile 可以在 Angular 1 中实现相同的功能。请让我知道如何在 Angular 7 中实现这一点

Answer 1

试试这个:

username = 'User Name';
sampleData = "This is my <strong>" + this.username + "</strong>";

根据您的评论，对于动态 tdata，您可以这样做:

username = 'User Name';
sampleData = "This is my {{username}}";

ngOnInit() {
   this.sampleData = this.sampleData.replace("{{username}}", `<strong> ${this.username} </strong>`)
}