Как получить информацию об элементах из компонентов в flexbox в Angular

Question

У меня есть компонент с гибкой коробкой дочерних компонентов.Я пытаюсь получить информацию, такую ​​как ширина элемента каждого компонента из с в моем родительском компоненте.В конце концов я пытаюсь узнать, не переполнен ли список, чтобы я мог изменить количество видимых элементов.Если он переполнен, я хотел бы поместить в конце специальный элемент, который показывает количество значков, которые в данный момент скрыты.

Я пытался использовать @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

Answer 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;
}