使用 Angular 相对于另一个元素动态定位一个元素

Question

如果我有一个像这样的几个元素的网格行。每个元素都是带有mouseenter 函数的 col-lg-3。当 mouseenter 被触发时，我们显示带有“popover”类的 div，但考虑到 div 在 html 中的位置，它总是显示在行的末尾（for 循环）。我想显示与悬停的 div 直接相邻的类弹出框的 div。为此，我需要获取悬停元素的位置，并使用“popover”类调整 div 的 x、y 坐标、高度、宽度和其他 css 属性。关于如何使用 Renderer2 完成此操作的任何想法？

<div class="row">
  <div class="card col-lg-3" *ngFor="let x of apples"
    (mouseenter)="displayPopover()">
    <div card-body">
      stuff here
    </div>
  </div>
  <div class="popover" *ngIf="showPopover">
    <p>position me</p>
  </div>
</div>

在我的打字稿文件中，我有一个这样的函数：

displayPopover() {
     this.showPopover = true;
     // dynamically position the popover next to the div that was hovered over
}

现在，

Answer 1

通常，您将遵循具有position: relative 的父级和具有position: absolute 后跟top bottom left right 属性的子级的概念。这会将元素保留在父元素内，现在要将它们拉出，您必须使用负边距值。

另外，请使用z-index，以防元素落后于其他元素。

现在，对于动态部分，您不需要动态执行，只需有一个预定义的类就可以了。仍然，想要动态地做吗？核心 javascript 样式函数工作正常，可以在适当的组件生命周期事件中使用。

此外，更多的 Angular 方法是使用属性重建类，然后在任何你想要的地方添加基于标志的类。

希望这会有所帮助！