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

Posted 2023-03-05

【中文标题】如何以角度添加带有字符串插值的html元素？

【英文标题】：How can I add html element with string interpolation in angular?

【发布时间】：2019-03-24 09:37:18

【问题描述】：

如何使用字符串插值动态添加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>

【问题讨论】：

Angular HTML binding的可能重复

试试：<header [innerHTML]="myObj.title + ' - ' + myObj.icon">。我不知道它是否适用于i 标签。

【参考方案1】：

您可以利用 innerHTML

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

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

【讨论】：

谢谢，但我想在不添加任何 html 标签作为 span 的情况下制作它

使用 DomSanitizer 或 DomSanitizationService

@SunilSingh 你能给我们一个DomSanitizer 在这种情况下的用法示例吗？