如何在Angular Tooltip指令中添加并渲染HTML标签？

当然有可行方案！你的问题出在Tooltip指令的create方法里——你用了renderer.createText(this.tooltipTitle)来创建文本节点，这会把所有传入的内容当作纯文本解析，自然HTML标签就无法被渲染了。

下面是具体的修复步骤，同时兼顾安全性：

1. 引入DomSanitizer处理HTML内容 #

Angular默认会对HTML内容进行安全检查，直接设置innerHTML可能会被阻止，所以我们需要用DomSanitizer来标记内容为安全可信的。

修改tooltip.directive.ts，添加相关导入和依赖注入：

import { Directive, Input, ElementRef, HostListener, Renderer2 } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; // 新增导入

@Directive({
  selector: '[tooltip]'
})
export class TooltipDirective {
  private sanitizedTooltip: SafeHtml; // 存储经过安全处理的HTML内容

  @Input('tooltip') set tooltipTitle(content: string) {
    // 对传入的HTML内容进行安全处理
    this.sanitizedTooltip = this.sanitizer.bypassSecurityTrustHtml(content);
  }
  
  @Input() placement: string;
  @Input() delay: string;
  tooltip: HTMLElement;
  tooltipOffset = 10; // 修正原代码的语法错误（原代码少了冒号）

  constructor(
    private el: ElementRef, 
    private renderer: Renderer2,
    private sanitizer: DomSanitizer // 注入DomSanitizer
  ) { }

  // ... 其他原有方法保持不变

  create() {
    this.tooltip = this.renderer.createElement('span');
    
    // 替换原有的createText逻辑，改为设置innerHTML
    this.renderer.setProperty(this.tooltip, 'innerHTML', this.sanitizedTooltip);
    
    this.renderer.appendChild(document.body, this.tooltip);
    this.renderer.addClass(this.tooltip, 'ng-tooltip');
    this.renderer.addClass(this.tooltip, `ng-tooltip-${this.placement}`);
    // delay
    this.renderer.setStyle(this.tooltip, '-webkit-transition', `opacity ${this.delay}ms`);
    this.renderer.setStyle(this.tooltip, '-moz-transition', `opacity ${this.delay}ms`);
    this.renderer.setStyle(this.tooltip, '-o-transition', `opacity ${this.delay}ms`);
    this.renderer.setStyle(this.tooltip, 'transition', `opacity ${this.delay}ms`);
  }

  // ... 其他原有方法保持不变
}

2. 关键修改说明 #

• 替换文本节点为innerHTML：不再用createText创建纯文本节点，而是通过renderer.setProperty设置tooltip元素的innerHTML，让浏览器解析HTML标签。
• 安全处理HTML：使用DomSanitizer.bypassSecurityTrustHtml告诉Angular传入的HTML内容是可信的，避免Angular的安全机制阻止渲染。注意：如果你的tooltip内容来自用户输入，一定要先做好内容过滤，防止XSS攻击！

3. 完善组件代码（可选） #

原app.component.ts中的displayStatut方法存在变量未初始化的问题，建议修正：

public displayStatut() {
  let content = ""; // 初始化content变量
  content += "<ul style='margin-bottom:10px;text-align: left'><li>Test</li><li>Another Item</li></ul>";
  return content;
}

现在鼠标悬停元素时，tooltip会正确渲染出带有样式的列表，而不是显示纯文本的HTML标签。

内容的提问来源于stack exchange，提问作者Greg-A