为指令提供内部 HTML 模板的最佳方法是什么？答案

【问题标题】：What is the best way to give a directive an inner HTML template?为指令提供内部 HTML 模板的最佳方法是什么？
【发布时间】：2017-10-02 08:33:12
【问题描述】：

我正在考虑给我的工具提示指令一个 HTML 模板的方法。该指令使用一个组件作为其外部模板，但有时该指令的 inner HTML 是用户想要设计的东西，例如在工具提示中插入一个图标或图像。

这就是指令现在的工作方式。你可以给它一个简单的字符串，一个对象或设计的字符串：

<div [my-tooltip]="'some text...'"></div>
<div [my-tooltip]="objectText"></div>
<div [my-tooltip]="'<div style=\'color:red;\'>text with style</div>'"></div>

但这是简单的方法，如果用户希望工具提示有更多的 HTML 呈现，如下所示：

 <div ng-class="{'icon-success' : mystatus.Status==='SUCCESS'}" style="cursor: pointer">{{myObject.text}}</div>

怎么做？它应该去哪里？我应该使用什么？内部 html 孩子？我不喜欢这种方法，因为可能存在不属于工具提示的内在孩子。请指教。

【问题讨论】：

标签： angular angular2-directives angular2-components

【解决方案1】：

您可以使用 ng-bootstrap 库将自定义 html 模板添加到弹出框： https://ng-bootstrap.github.io/#/components/popover.

【讨论】：