如何从 Angular 的弹性框中的组件中获取元素信息答案

【问题标题】：How to get element info from components in a flexbox in Angular如何从 Angular 的弹性框中的组件中获取元素信息
【发布时间】：2019-05-23 08:32:44
【问题描述】：

我有一个带有子组件弹性框的组件。我试图从我的父组件中获取每个组件的元素宽度等信息。我最终要做的是知道列表是否溢出，以便我可以修改可见元素的数量。如果溢出，我想在最后放置一个特殊元素，显示当前隐藏的图标数量。

我尝试过使用@ViewChildren，但不知道如何从中获取元素尺寸。我该怎么做？

<div class="file-list">
    <app-file-icon [text]="file" *ngFor="let file of files"></app-file-icon>
</div>

css:

.file-list {
  width: 200px;
  height: 120px;
  border: 1px solid grey;
  padding: 10px;
  margin: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* overflow: hidden; */
}

沙盒：

https://codesandbox.io/s/j733w4w7ww

【问题讨论】：

如果没有 Javascript，您将无法显示隐藏项目的数量。列表的其余部分所需的功能是什么？永久隐藏还是想要see more 按钮？
@sallf 是的，更像是一场演出，但我不确定此时的确切行为。我认为这与我尝试做的第一件事无关，即限制可见元素的数量并将 +n 图标添加到列表中。我更新了示例以大致演示我的目标。
你能在这里发布更多你的代码吗？列表是如何生成的？一种方法是获取包装div 的bottom 位置，然后计算列表中top 位置大于该位置的项目。

标签： html css angular flexbox

【解决方案1】：

您可以依赖Element.getBoundingClientRect() 为父母和孩子，如果他们的.bottom 大于父母的（双关语），则为孩子设置私有属性。

基于此属性，您可以隐藏溢出的并在父级中计数。

https://codesandbox.io/s/q8o798v2kw

相关代码（file-icon.component.ts）：

ngAfterViewInit() {
  let fileIcon = this.elemRef.nativeElement.querySelector(".file-icon"),
      b1 = fileIcon.getBoundingClientRect(),
      fileList = fileIcon.closest(".file-list"),
      b2 = fileList.getBoundingClientRect();
  this.hidden = b2.bottom < b1.bottom;
}

【讨论】：