如何获得Angular 5组件元素的位置? [英] How can I get an Angular 5 component element's position?

问题描述

在5角组件中，我有一个表格，我需要创建一些内容，例如在多个 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?

推荐答案

据我了解，您希望将html元素(td)相对于另一个元素(div)放置.这似乎是纯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.

您可以通过以下方式将这两个元素放置在包含框中

You could position both elements in a containing box with

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组件元素的位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！