Question

这是在Angular 4应用程序中。我想用HTML格式的内容做一个popover。看一下文档和备忘单，我找到了这样的例子：

<button type="button" class="btn btn-secondary" data-container="body"
    data-toggle="popover" data-placement="right"
    data-content="Vivamus sagittis lacus vel augue laoreet rutrum        faucibus.">
  Popover on right
</button>

弹出窗口内容包含在数据内容属性值中。

我更愿意拥有的是ID引用包含格式化内容的部分（包括标签/ css）。有没有不同的方法呢？

Answer 1

您可以使用NgbPopover中的ng-bootstrap组件。正如documentation中所述，它允许在ng-template元素中提供的弹出窗口内容中包含HTML。

您可以在this plunker中看到一个示例。

<ng-template #popContent>
  <span style="color: red;">Hello</span>
  <span style="font-weight:bold;">{{name}}!</span>
</ng-template>
<button type="button" class="btn btn-secondary" [ngbPopover]="popContent" popoverTitle="Fancy content">
  I've got HTML in my popover!
</button>

带有格式化内容的Bootstrap 4 Popover

1 个答案: