子组件相对于其父组件的实际offsetTop

Question

在Angular 7应用程序中，我使用element.nativeElement.offsetTop属性与其他2个属性一起确定组件是否在设备的视口中，然后触发某些动画。

当我得到以下用例时，一切正常：

<app-parent-component></app-parent-component>

和

<app-child-component1></app-child-component1>
<app-child-component2></app-child-component2>

这样子组件1和子组件2都会相对于父组件正确检查它们的offsetTop，并且它们的行为符合预期。

然后我有以下用例：

<app-parent-component></app-parent-component>

和

<app-child-component1></app-child-component1>
<div class="row justify-content-center">
   <div class="col-10">
      <app-child-component2></app-child-component2>
   </div>
</div>

在这种特殊情况下，elementRef将col-10元素作为参考，而offsetTop被计算为零，因此显示可能位于屏幕底部（视口外部）的组件，并触发了动画/填充但这不应该。

我的问题是：是否有一种干净/简便的方法（尝试避免使用条件循环到父对象的while循环）来实现它？

谢谢