使用ngx-popover HTML模板时报错HTMLElement不可分配给string|TemplateRef<any>

报错原因 #

ngx-bootstrap v6及以上版本中，[popover] 输入属性仅支持 string 或 TemplateRef<any> 两种类型值。你当前代码直接绑定了 <popover-content> 组件的DOM实例（类型为HTMLElement），不符合输入类型要求，因此触发TS类型校验报错。

解决方案 #

推荐替换旧版的<popover-content>写法，改用标准的ng-template实现自定义模板，修改后代码如下：

<li class="nav-item">
    <a class="nav-link" 
       [popover]="myPopover"
       popoverTitle="this header can be omitted"
       [outsideClick]="true"
       role="button">
        <i class="fas fa-filter"></i>
    </a>
    <ng-template #myPopover>
        <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.
    </ng-template>
</li>

额外检查项 #

确保你在当前业务所属的NgModule中已经正确导入Popover模块：

import { PopoverModule } from 'ngx-bootstrap/popover';

@NgModule({
  imports: [
    // ...其他导入
    PopoverModule.forRoot()
  ]
})
export class YourModule { }

内容的提问来源于stack exchange，提问作者Sandeep Thomas