ngx bootstrap popoverTitle 呈现为 HTML

Posted 2023-02-22

【中文标题】ngx bootstrap popoverTitle 呈现为 HTML

【英文标题】：ngx bootstrap popoverTitle render as HTML

【发布时间】：2018-02-12 02:23:04

【问题描述】：

我正在使用 ngx bootstrap popver：http://valor-software.com/ngx-bootstrap/#/popover#popover-directive。我能够将弹出框体呈现为 html。但是，这不适用于 PopoverTitle。文档说 popover 类型是 string | TemplateRef 和 PopoverTitle 是一个字符串，因此我可能无法将 popovertitle 的标题呈现为 html，就像我对 popover 正文所做的那样。在下面的代码中：我按预期将弹出框正文内容作为 HTML。但是，不适用于 popoverTitle。

< span *ngFor="let item of items;">
    < template #popTemplate>
        <div [innerHtml]="getPopoverDetails(item)"></div>
    < /template>
    < template #popTemplate1><div [innerHtml]="getPopoverTitle(item)"></div>
    < /template>
    < img class="" [src]="item.image" [popover]="popTemplate" [popoverTitle]="popTemplate1" triggers="mouseenter:mouseleave" 
placement="right"/>                                  
< /span>  

我认为这是因为 popoverTitle 不支持 TemplateRef。在那种情况下，无论如何将popoverTitle字符串呈现为HTML（原因是我的标题内容不是纯文本，我还需要放置图像和其他html内容）

【问题讨论】：

功能在路线图上

【参考方案1】：

< span *ngFor="let item of items;">
    < template #popTemplate>
        <div class="popover-title popover-header" [innerHtml]="getPopoverTitle(item)" style="margin:-10px -10px -0px -10px;">
        <div [innerHtml]="getPopoverDetails(item)"></div>
    < /template>
    < img class="" [src]="item.image" [popover]="popTemplate" triggers="mouseenter:mouseleave" 
placement="right"/>                                  
< /span>  

我已修改您的代码以包含您的标题 html 内容，并将 popover-title popover-header 类作为默认弹出框标题类并包含样式以删除弹出框的默认填充效果并使其看起来像弹出框标题