qx bootstrap popoverTitle作为HTML

问题描述 投票:3回答:1

我正在使用ngx bootstrap popver:http://valor-software.com/ngx-bootstrap/#/popover#popover-directive。我能够将弹出框体渲染为HTML。但是,这对PopoverTitle不起作用。文档说popover类型是字符串| TemplateRef和PopoverTitle是一个字符串,所以我可能无法将标题渲染为popovertitle的html,就像我为popover body所做的那样。在下面的代码中:我按照预期将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内容)

angular2-template angular2-directives bootstrap-popover ngx-bootstrap
1个回答
0
投票
< 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类作为默认的popover头类和包含的样式来删除popover的默认填充效果并使其看起来像popover header

© www.soinside.com 2019 - 2024. All rights reserved.