如何获得 Angular 5 组件元素的位置?

问题描述

在 angular 5 组件中，我有一个 table，我需要创建类似在多个 td 之上覆盖多个 div 的内容.获取这些 td 在表格中的位置以便我可以定位其他元素的最佳方法是什么?

In an angular 5 component I have a table, and I need to create something like overlaying multiple divs above several td's. What's the best way to get the position of those td's in the table so I can position the other elements?

我目前正在尝试使用类似的东西

I'm currently trying to use something like

@ViewChild('table')
tableElement: ElementRef

ngAfterViewChecked() {
    this.tableElement.nativeElement.getElementsByClassName('cell')
    // ...
}

但是我这样做是在冒一些奇怪的无限循环的风险.例如，有没有办法知道某个特定元素被重绘"了?

But I'm risking some weird infinite loops doing it this way. Is there a way to know that a specific element was "redrawn", for instance?

推荐答案

据我所知，您想要相对于另一个(div)定位一个 html 元素(td).这似乎是一个简单的 html 和 css 问题.

As far as I understand you want to position an html element (the td) relative to another (the div). This seems to be a plain html and css issue.

您可以使用

position: relative;

并且您要放置在上方的 div 应具有以下属性，以便它们与您的 td 重叠

And the div that you want to position above should have following properties so that they overlap with your td

position: absolute;
top: /*your top value*/;
left: /*your left value*/;

如果您真的想获得 td 的确切位置，则需要通过 Javascript 提取顶部、底部、右侧和左侧的位置.

If you really want to get the exact position of your td then you need to extract the top, bottom, right and left position via Javascript.

    this.tableElement.nativeElement.getElementsByClassName('cell').getBoundingClientRect();

这篇关于如何获得 Angular 5 组件元素的位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！