Angular 2：在插值的双花括号 {{ }} 中应用样式或使用 html 标签答案

【问题标题】：Angular 2: apply style or use html tags in double-curly braces {{ }} of interpolationAngular 2：在插值的双花括号 {{ }} 中应用样式或使用 html 标签
【发布时间】：2018-01-25 16:52:01
【问题描述】：

我为工具提示创建了一个组件。以下是我的观点：

<tooltip [tooltipDisplayText]="ttp.mainText" tooltipFullText="{{ttp.fieldType}} {{ttp.mainText}} {{ttp.subText}}"></tooltip>

我希望它如下所示：假设（fieldType : Name, mainText : Shahrukh, and subText:Actor）

姓名
沙鲁克
演员

但我很困惑如何在括号中格式化它。有人可以帮我解决这个问题吗？

【问题讨论】：

tooltip 组件来自哪里？
使用工具提示组件和更多代码更新问题。
@yurzui：工具提示是用 Angular 2 编写的。
@micronyks: 代码工作正常，但在同一行和相同的文本样式上，这就是我需要在其上应用 css/html 的原因
我们可以在tooltipFullText中使用带有{{}}的html标签或类吗？例如：tooltipFullText="{{ttp.fieldType}} {{ttp.mainText}} {{ttp.subText}}">

标签： html css angular sass

【解决方案1】：

您可以在 innerHTML 属性中使用您的属性中的任何字符串

tooltipFullText="<div><b>{{ttp.fieldType}}</b></div>{{ttp.mainText}}
                     <div><i>{{ttp.subText}}</i></div>"

然后在您的工具提示组件中：

@Input() tooltipFullText;

<div [innerHTML]="tooltipFullText"></div>

Demo

【讨论】：