如何在PrimeNG Tooltip中添加图片并解决TemplateRef类型报错

错误原因 #

[pTooltip] 输入属性原生仅支持接收字符串类型的提示文本，你直接将ng-template引用绑定到该属性上，就会触发TemplateRef类型无法赋值给string类型的报错。PrimeNG 专门提供了 tooltipTemplate 属性来接收自定义模板引用。

正确实现方案 #

有两种常用写法：

写法1：适配你原有代码的外部模板引用写法 #

仅需要将你代码中绑定到[pTooltip]的模板引用，改绑到[tooltipTemplate]属性即可：

<i pTooltip [tooltipTemplate]="picture" tooltipPosition="bottom" class="pi pi-images"></i>
<ng-template #picture>
  <img src="你的图片资源路径" alt="here img">
</ng-template>

写法2：内嵌模板写法 #

也可以直接把自定义内容模板放在触发元素内部，用pTemplate="content"标记：

<i pTooltip tooltipPosition="bottom" class="pi pi-images">
  <ng-template pTemplate="content">
    <img src="你的图片资源路径" alt="提示图片">
  </ng-template>
</i>

注意事项 #

如果使用的是低于v14的PrimeNG版本，需要先升级依赖包版本，再使用上述自定义模板功能。

内容的提问来源于stack exchange，提问作者Maxim Zebzeev