尝试将 HTML 模板用于 ngx-popover 时，类型 'HTMLElement' 不可分配给类型 'string | TemplateRef<any>'

Question

我正在尝试为我的 Popover

使用 HTML 模板

这是我的标记

<li class="nav-item">
    <a class="nav-link" [popover]="myPopover"
       role="button">
        <i class="fas fa-filter"></i>
    </a>
    <popover-content #myPopover
                     title="this header can be omitted"
                     [closeOnClickOutside]="true">
        <b>Very</b> <span style="color: #C21F39">Dynamic</span> <span style="color: #00b3ee">Reusable</span>
        <b><i><span style="color: #ffc520">Popover With</span></i></b> <small>Html support</small>.
        Click outside of this popover and it will be dismissed automatically.
    </popover-content>
</li>

但是它显示这样的编译错误

> error TS2322: Type 'HTMLElement' is not assignable to type 'string |
> TemplateRef<any>'.   Type 'HTMLElement' is not assignable to type
> 'string'.
> 
> 70               <a class="nav-link" [popover]="myPopover"
>                                       ~~~~~~~

我不明白我错过了什么

Answer 1

我认为您需要将弹出框包装在 ng-template 中。

<li class="nav-item">
    <a class="nav-link" [popover]="myPopover"
       role="button">
        <i class="fas fa-filter"></i>
    </a>
    <ng-template #myPopover>
        <popover-content title="this header can be omitted" [closeOnClickOutside]="true">
            <b>Very</b> <span style="color: #C21F39">Dynamic</span> <span style="color: #00b3ee">Reusable</span>
            <b><i><span style="color: #ffc520">Popover With</span></i></b> <small>Html support</small>.
            Click outside of this popover and it will be dismissed automatically.
        </popover-content>
    </ng-template>
</li>

尝试将 HTML 模板用于 ngx-popover 时，类型 'HTMLElement' 不可分配给类型 'string | TemplateRef<any>'

Type 'HTMLElement' is not assignable to type 'string | TemplateRef<any>' when trying to use HTML template for ngx-popover

angular

ngx-bootstrap