有角度的方法来获取外部html元素的属性

Question

在我的应用程序中，我具有深层嵌套的组件结构。我有一个很长的组件，它垂直滚动。在该滚动块内部，我带有带有“ cog”图标的组件。当您单击该图标时，弹出窗口旁边应该会出现一个弹出框。

但是，弹出框应考虑该滚动块的高度。为了适应滚动块，应根据“齿轮”图标的位置显示在其底部还是顶部。

因此，总而言之，我需要以某种方式知道滚动块内容的innerHeight及其绝对位置（getBoundingClientRect），以便正确放置弹出窗口。

现在，我已经使用html元素ID做到了。然后只需在popover组件构造函数中按id查找元素：

constructor(@Inject(DOCUMENT) private doc: Document) {
    this.scrollingBlock = doc.getElementById('scrollingBlock');
}

然后简单地从中获取我需要的属性。如下所示：

this.scrollingBlockHeight = (this.scrollingBlock.firstChild as HTMLElement).scrollHeight;
this.scrollingBlockRect = this.scrollingBlock.getBoundingClientRect();

尽管现在一切正常，但我认为这不是一个非常优雅的解决方案。我正在为应用程序使用Angular 6。有没有更好的方法来达到相同的结果？