ngx bootstrap popover 将 html 字符串创建移动到 HTML 模板文件

Posted 2023-02-22

【中文标题】ngx bootstrap popover 将 html 字符串创建移动到 HTML 模板文件

【英文标题】：ngx bootstrap popover move the html string creation to HTML template file

【发布时间】：2018-02-12 03:43:09

【问题描述】：

我正在使用 ngx bootstrap http://valor-software.com/ngx-bootstrap/#/popover#popover-directive

我正在使用动态html样式在popover body中显示html如下：

<span *ngFor="let item of items;">
    <template #popTemplate><div [innerHtml]="getPopoverDetails(item)"></div></template>
    <img class="appIcon" [src]="item.image" [popover]="popTemplate"/>                                  
</span>     

在控制器中：

private getPopoverDetails(item) 
        let content = '<img class="" src="' + (item.image) + '"/>';
        content += '<span class="popup">' + (item.name) + '</span>' +
                '<div class="row popup">' +
                     '<div class="col-xs-12">' +
                         '<span>XXX</span>' +
                     '</div>' +
                '</div>' +
                '<div class="row popup">' +
                     '<div class="col-xs-12">' +
                         '<span>' + ((typeof item.cost !== 'undefined') ? (item.cost) : '') + '</span>' +
                     '</div>' +
                '</div>' +
                '<div class="row popup">' +
                     '<div class="col-xs-12">' +
                         '<span>yy</span>' +
                     '</div>' +
                '</div>' +
                '<div class="row popup">' +
                     '<div class="col-xs-12">' +
                         '<span>' + ((typeof item.cost !== 'undefined') ? 'zz' : 'yy') + '</span>' +
                     '</div>' +
                '</div>';
        return content;

现在，使用上述方法，我必须在控制器等中构建我的 HTML 字符串。因为它是 HTML，有没有一种干净的方法可以在 HTML 模板文件本身中构建它？ 我不想将 html 字符串创建放在控制器或任何其他打字稿辅助函数中。 HTML 在 HTML 模板本身中看起来会更好。是吗 可能吗？

【参考方案1】：

这应该有帮助：将 html 从函数移动到模板：

<template #popTemplate><div>
  <img class="" [attr.src]="item.image"/>
  <span class="popup"> item.name </span>
  <!-- and so on, put html from function here -->
</div></template>