javascript - 如果在 Angular2 中使用 ngFor 该元素有可用空间，如何渲染元素

Question

我正在创建一个 Angular 2 组件来显示标签(如 StackOverflow 中的问题所示)。但在我的场景中，我只有有限的空间来显示标签，因为我只能使用一行。如果还有更多标签无法显示，我想使用一个数字来表示它们，显示有多少标签未显示。

例如，

如果有足够的空间 - [apple][mango]

如果不是 - [苹果][芒果][香蕉][+3]

有没有一种方法可以使用自定义管道(使用 ngFor)来执行此操作？

目前我正在使用 ngFor 渲染所有标签，并使用 css flex 将它们排成一行。

<div 
    *ngFor="let tag of tags" 
    class="tag" 
    [ngClass]="'tag--' + tag.type">
    {{tag.value}}
</div>

Answer 1

我想出的解决方案是，在 AfrerViewInit 生命周期钩子(Hook)中手动检查元素边界框的顶部位置并删除元素，直到第一个和最后一个元素的顶部值匹配。

ngAfterViewInit() {
  this.hidden = 0;
  let children: Element[] = this.elementRef.nativeElement.getElementsByClassName('wrapper')[0].children;
  let topOfFirst = children[0].getBoundingClientRect().top;
  let topOfLast;
  for (let i = children.length - 2; i > 0; i--) {
    topOfLast = children[children.length - 1].getBoundingClientRect().top;
    if (topOfLast > topOfFirst) {
      children[i].remove();
      this.hidden++;
    }
  }

  // remove counter if hidden count is 0
  if (this.hidden === 0) {
    topOfLast = children[children.length - 1].remove();
  }
}