我需要使用 Angular 7 在 HTML 模板中实现动态变量编译。
这是我的示例代码：
app.component.ts：
username = 'User Name';
sampleData = "This is my <strong>{{username}}</strong>";
app.component.html：
<div [innerHtml]="sampleData"></div>
但是，输出仍然是
This is my {{username}}.
我的预期输出是，
This is my UserName
使用$compile 可以在Angular 1 中实现相同的功能。请让我知道如何在 Angular 7 中实现这一目标
【问题讨论】：
标签： javascript html css json angular
试试这个：
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>`)
}
【讨论】：
ngOnInit()中的要求编译您的字符串
您可以使用 ng-template 并为其创建本地引用，并将其与 ngTemplateOutlet 一起使用，您可以在其中传入动态内容。
HTML（模板）
<ng-template #temp let-item>
<div> This is my variable <strong>{{ item }}</strong> which is dynmically parsed. </div>
</ng-template>
<ng-container *ngTemplateOutlet="temp; context: { $implicit: name }"></ng-container>
打字稿
export class AppComponent {
name = 'Angular';
}
查看 stackblitz 演示 - https://stackblitz.com/edit/angular-lec12u
【讨论】：