Angular 如何获得角度为5个分量的元素'；什么位置？

在angular 5组件中，我有一个表，我需要在几个td上创建类似于叠加多个div的内容。获取表中那些td的位置以便我可以定位其他元素的最佳方法是什么

我目前正在尝试使用类似

@ViewChild('table')
tableElement: ElementRef

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

但我冒着一些奇怪的无限循环的风险这样做。例如，有没有办法知道某个特定元素被“重绘”了？

由于您在AfterViewChecked生命周期挂钩中运行该函数，“无限”循环是正常的

按设计：

afterview检查生命周期挂钩，在每次检查组件视图后调用该挂钩。

---

我将使用

getBoundingClientRect

获取顶部、底部、宽度、高度等，但我不确定我是否理解您希望在哪种情况下运行getElement。你说的“重画”是什么意思？如果数据是动态出现的，您可以在promise解析后尝试获取位置。

据我所知，您希望将html元素（td）相对于另一个（div）定位。这似乎是一个简单的html和css问题

您可以将这两个元素放置在包含框中

position: relative;

您要在上面定位的div应该具有以下属性，以便它们与您的td重叠

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

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

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

---

单向：合并来自调整大小事件和主题的流。如果您使用http获取数据，而不是使用主题，那么您可以使用从http获取的相同可观察对象，如http.get（…）.pipe（share（））

从'rxjs/observate/merge'导入{merge}；
从'rxjs/observable/fromEvent'导入{fromEvent}；
从'rxjs/Subject}导入{Subject}；
// ...
tableChange$：主题=新主题（）；
恩戈尼尼特（）{
合并(
fromEvent（窗口“调整大小”），
这是我的零钱$
).订阅（（）=>{
this.tableElement.nativeElement.getElementsByClassName（'cell'）。。。
})；//在现实生活中，记得在OnDestroy取消订阅此订阅
此.tableChange$.next（）；
}

编辑：

---

将此问题转移到那些TDs内部使用的组件可能是一个更干净、更简单的解决方案。您可以使用

ng content

来显示组件中的任何内容，并通过在构造函数中注入elementRef来获取elementRef。如果您仍然需要与家长交谈，请使用输出。

我在定位div时没有TDs的位置，因此这不是CSS问题。您不需要td的位置来相应地定位div。或者使用我在下面提到的选项。我想要一个事件或类似的东西，在绘制表格后调用它，我可以得到每个元素的位置，因此，我可以以某种方式定位重叠div。正如我在回答中提到的，如果表的数据来自后端，则在解析承诺时，必须调用getBoundingClientRect（）。如果表的数据是在模板中硬编码的，那么ngAfterViewInit（）应该可以。它只被调用一次。

import {merge} from 'rxjs/observable/merge';
import {fromEvent} from 'rxjs/observable/fromEvent';
import {Subject} from 'rxjs/Subject};
// ...
tableChange$:Subject<void> = new Subject();

ngOnInit() {
    merge(
         fromEvent(window, 'resize'),
         this.tableChange$
    ).subscribe(() => {
        this.tableElement.nativeElement.getElementsByClassName('cell')...
    }); // remember to unsubscribe this subscription at OnDestroy in real life
    this.tableChange$.next();
}