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

Posted 2023-03-31

【中文标题】如何从 Angular 的弹性框中的组件中获取元素信息

【英文标题】：How to get element info from components in a flexbox in 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 位置大于该位置的项目。

【参考方案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;