角 5 |获取元素点击高度

Question

我目前正在尝试获取在我正在处理的侧边栏中单击以显示子菜单的元素的高度。我目前有这个代码...

<li (click)="newsExpanded = !newsExpanded; getMargin($event)" style="margin-bottom: 50px;">
    <a>
        <i class="fa fa-newspaper"></i>
            <span>News</span>
            <i class="fa fa-angle-left sidebar__sub_menu_icon"></i>
            <ul class="sidebar__sub_menu" [class.expanded]="newsExpanded">
                 <li>
                     <a>Create New Post</a>
                 </li>
                 <li>
                     <a>View All Posts</a>
                </li>
           </ul>
     </a>
</li>

因此，当新闻展开时，它会添加只在子菜单上显示块的展开类，这工作正常，但我想在单击外部 li 时为内部 ul 添加一个边距底部。这必须是内部 ul 的高度。您可以看到我已经完成了 getMargin 的课程，但是目前这并没有做任何事情，这是我想要弄清楚的。

任何帮助都将不胜感激，如果他们是更好的方法，那么请告诉我，我是 Angular 的新手，所以我很感激任何反馈。

Answer 1

要使用$event 获取被点击元素的高度，您应该执行以下操作：

onClick($event): void {
    let clientHeight = $event.target.clientHeight; //Height + padding without borders
    let offsetHeight = $event.target.offsetHeight; //Height + padding with borders

    //if you need the element plus margin-top/bottom
    let compStyle = window.getComputedStyle($event.target)
    clientHeight += parseInt(compStyle.getPropertyValue('margin-top'));
    clientHeight += parseInt(compStyle.getPropertyValue('margin-bottom'));
} 

演示：https://stackblitz.com/edit/angular-1apnhb

---

这里是 clientHeight 和 offsetHeight 的 MDN 文档。你也可以看看scrollHeight。