将数据发送到 Angular 工具提示指令

Question

我在网上找到了一个工具提示指令的例子。我需要扩展它以便我可以将数据传递给工具提示并将其呈现在 *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>

Answer 1

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

遍历数组并构造 div 个元素并将它们添加到 view

的 rootNodes 中的 div.tooltip

  this.tooltipDataArray.forEach(el => {
      const child = document.createElement("div");
      child.innerText = el;
      this.renderer.appendChild(view.rootNodes[1], child);
    });

然后遍历 view 上的节点并将它们添加到 elementRef 中，就像您现在所做的那样。

view.rootNodes.forEach(node =>{
      this.renderer.appendChild(this.elementRef.nativeElement, node);
     } );

STACKBLITZ

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

将数据发送到 Angular 工具提示指令

Sending Data to an Angular Tooltip Directive

angular

angular-directive

angular-renderer2