将数据发送到Angular Tooltip指令

问题描述

我在网上找到了一个有关Tooltip指令的示例。我需要扩展它，以便可以将数据传递到工具提示并在* ngFor中呈现。到目前为止，我有

app.component.html

<div tooltipDirective [tooltipDataArray]="['Person1','Person2']">See tooltip!
  <ng-template #tooltipTemplate>      
      <div class="tooltip">   
          This is my tooltip!
      </div>      
  </ng-template>  
</div>

tooltip.directive.ts

  @input() tooltipDataArray: string[];

  @ContentChild( "tooltipTemplate" ) private tooltipTemplateRef: TemplateRef<Object>;

  @HostListener('mouseenter')  onMouseEnter(): void { 
    console.log(this.tooltipDataArray);   
    const view = this.viewContainerRef.createEmbeddedView(this.tooltipTemplateRef);
    view.rootNodes.forEach(node => 
      this.renderer.appendChild(this.elementRef.nativeElement,node));
  }


  @HostListener('mouseleave') onMouseLeave(): void {        
    if (this.viewContainerRef) {
      this.viewContainerRef.clear();
    }  
  }

我可以记录数据以便被接收，但是我不确定createEmbeddView，rootNodes和appendchild是如何工作的（我是通过示例进行工作）。我想要的工具提示是将Person1，Person2包含在另一个之上。我如何才能做到这一点？

StackBlitz Here

编辑：

我认为尝试此操作将使我更接近我想要的内容，并对其进行更好的解释，但现在工具提示根本不显示。这是正确的方法吗？

<div tooltipDirective [tooltipDataArray]="['Person1','Person2']">See tooltip!
 <ng-template #tooltipTemplate>      
   <div class="tooltip" *ngFor="let person of tooltipDataArray">
      {{ person }}
   </div>      
 </ng-template>  
</div>

解决方法

完成此操作的一种方法是执行以下操作。

遍历数组并构造div元素，并将它们添加到div.tooltip的{{1}}中的rootNodes

view

然后像现在一样遍历this.tooltipDataArray.forEach(el => { const child = document.createElement("div"); child.innerText = el; this.renderer.appendChild(view.rootNodes[1],child); });上的节点并将其添加到view。

elementRef

STACKBLITZ

https://stackblitz.com/edit/angular-zr2ydx?file=app/tooltip.directive.ts

angular angular angular-directive angular-renderer2