0

我在网上找到了一个 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>

工具提示.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 这里

编辑：

我认为尝试这样做会让我更接近我想要的并更好地解释它，但现在工具提示根本没有显示。这是正确的方法吗？

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

1 回答 1

1

实现此目的的一种方法是执行以下操作。

循环遍历您的数组并构造元素div并将它们添加div.tooltip到rootNodesview

  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);
     } );

堆栈闪电战

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

于 2020-11-12T14:39:32.593 回答