如何以角度添加带有字符串插值的html元素？

Question

如何使用字符串插值动态添加html元素不添加任何html标签？经验：

这是我组件中的 obj

myObj = {
    title: 'Header Title',
    icon: '<i class="fa fa-user">'
}

我想添加这样的;

<header>
    {{myObj.title}} - {{myObj.icon}}
</header>

{{myObj.icon}} 呈现为文本，但我想呈现为 html。怎么可能？

我希望结果如下

<header>
    Header Title <i class ="fa fa-user"></i>
</header>

如果我像这样改变我的 obj；

myObj = {
    title: 'Header Title',
    icon: '<mat-icon>search</mat-icon>'
}

渲染为

<header>
    Header Title <mat-icon>search</mat-icon>
</header>

Answer 1

您可以利用 innerHTML

<header>
    <span>{{myObj.title}}</span> - <span [innerHTML]="myObj.icon"></span>
</header>

注意：我习惯于隔离元素，但是您可以根据自己的设计选择任何元素。