Question

在一个有角度的5分量中，我有一个表，我需要创建一些东西，例如在多个 td ＆＃上面覆盖多个 div 39; S。什么是获得表中 td 位置的最佳方式，以便我可以定位其他元素？

我目前正在尝试使用类似

的内容

@ViewChild('table')
tableElement: ElementRef

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

但我冒这样一些奇怪的无限循环冒险。有没有办法知道某个特定元素是＆＃34;重绘＆＃34;，例如？

Answer 1

＆＃34;无限＆＃34;循环是正常的，因为您在AfterViewChecked生命周期钩子中运行该函数。

按设计：[HttpPost] public ActionResult ParseSearchLists(int studentId) { SearchModel searchModel = ApplicationVariables.searchResults.Where(x => x.StudentId == studentId).ToList().First(); TempData["SearchModel"] = searchModel; return RedirectToAction("UploadFile", "Upload"); } public ActionResult UploadFile() { searchModel = TempData["SearchModel"] as SearchModel; return View(searchModel); //debug point hits here. }

我会使用AfterViewChecked Lifecycle hook that is called after every check of a component's view.获取顶部，底部，宽度，高度等getBoundingClientRect https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect，但我不确定我是否了解您要在哪个事件中运行getElement 。你是什么意思＆＃34;重绘＆＃34; ？如果数据是动态传递的，您可以尝试在承诺解决后获取位置。

Answer 2

据我所知，你想要将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();

Answer 3

一种方法：合并来自调整大小事件和主题的流。如果您使用http获取数据，则可以使用您已经拥有的相同可观察量，而不是主题，例如const keywordArr = ['jim', 'john'], message = 'Hello john, how are you doing today?'; keywordArr.forEach(v => { if (message.match(v)) console.log(`message contain ${v}`); });

http.get(...).pipe(share())

修改

它可能更清洁＆amp;更简单的解决方案，将此问题转移到您在这些TD中使用的组件。您可以使用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(); }显示组件内的任何内容，并通过在构造函数中注入它来获取elementRef。如果您仍需要与父母交谈，请使用输出。

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

3 个答案: