指令输入数组的角度样式viewContainerRef [英] Angular styling viewContainerRef from Directive Input array

问题描述

我创建了一个指令，该指令使用可变长度数组来填充工具提示.这很好用，但我需要动态设置工具提示的样式，以使其保留在初始触发器组件下.使用根据项目数而变化的最高或最低值.

I have created a directive that uses a variable length array to populate a tooltip. This works great but I need to dynamically style the tooltip so it remains under the initial trigger component. Using a top or bottom value that changes based on the number of items.

<div tooltipDirective [tooltipDataArray]="['Person1', 'Person2', 'Person3', 'Person4', 'Person5', 'Person6']">See tooltip!
 <ng-template #tooltipTemplate > 
  <div class="tooltip" [ngStyle]="{'top.px': divStyle}">   // Not sure if this is the correct approach as can't bind to divStyle in the directive
  </div>      
 </ng-template>  
</div>

我尝试使用ngStyle，但不确定如何访问divStyle值，因为它是使用viewContainerRef.createEmbeddedView创建的.

I tried using ngStyle but am unsure how to get access to the divStyle value because this is created using viewContainerRef.createEmbeddedView.

我认为一个更好的选择是使用style.bottom从ts文件中添加样式，但是我不知道如何添加.我需要计算tooltipDataArray.length，然后将10px左右添加到重新放置viewContainerRef的变量中.我不确定最好的处理方法.

I thought a better option would be to add the styles from the ts file using style.bottom but I don't know how to add that. I need to calculate tooltipDataArray.length then add 10px or so to a variable that repositions the viewContainerRef. I'm not sure of the best way to proceed.

 @Input() tooltipDataArray: string[];

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

 @HostListener("mouseenter") onMouseEnter(): void {
  console.log(this.tooltipDataArray);
   const view = this.viewContainerRef.createEmbeddedView(
     this.tooltipTemplateRef
   );

  this.tooltipDataArray.forEach(el => {
  const child = document.createElement("div");
  child.innerText = el;
  this.renderer.appendChild(view.rootNodes[1], child);
  });
  
  // Somthing like this.viewContainerRef.styles.bottom = 10 x this.tooltipDataArray.length + 'px'
  
  console.log(view.rootNodes)
  view.rootNodes.forEach(node => {
  this.renderer.appendChild(this.elementRef.nativeElement, node);
});
}

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

此处出现stackBlitz

推荐答案

如果您愿意将 templateRef 作为指令的输入，这会容易得多...

If you were willing to pass in the templateRef as an input to the directive this would be a lot easier...

在您当前的实现中，您正在替换 div 以及模板的呈现内容...

With your current implementation you are replacing the content of the div with the rendered content of the template...

• 这本质上是不是工具提示，则需要以某种方式将它们解耦，以模拟工具提示"

---

以下是您可以完成此操作的一种方法.

---

Below is one way you could accomplish this.

将div的 ng-template 与div分离，然后将您的 #tooltipTemplate 作为值传递给 [templateRef] 输入在指令

Separate the ng-template from the div to decouple them, and pass your #tooltipTemplate as a value to the [templateRef] input on the directive

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

在您的指令中，将您的 @ContentChild 转换为输入以接收 templateRef ，创建您的 embeddedView 并添加您的 array 元素.

In your directive convert your @ContentChild to an input to receive the templateRef, create your embeddedView and add your array elements.

• 这也简化了您的逻辑

  @Input() templateRef: TemplateRef<Object>;

  @HostListener("mouseenter") onMouseEnter(): void {
    const view = this.viewContainerRef.createEmbeddedView(this.templateRef);
    this.tooltipDataArray.forEach(el => {
      const child = document.createElement("div");
      child.innerText = el;
      this.renderer.appendChild(view.rootNodes[1], child);
    });
  }

调整全局样式

.tooltip {
  position: absolute;
  /* bottom: -40px; */
  left: 15px;
  padding: 10px;
  background: red;
  border-radius: 5px;
  /* box-shadow: 0 2px 1px rgba(0, 0, 0, 0.6); */
}

STACKBLITZ

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

这将是您提供的脚手架最干净的实现...说，如果我要实现一个工具提示指令，我将研究 CDK Overlay 创建一个自定义工具提示实现.

This would be the cleanest implementation with the scaffolding you have provided... with that said, if I were to implement a tooltip directive, I would research CDK Overlay to create a custom tooltip implementation.

这篇关于指令输入数组的角度样式viewContainerRef的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！