如果在Angular2

Question

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

例如，

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

如果没有 - [apple] [芒果] [香蕉] [+ 3]

有没有办法可以使用自定义管道（使用ngFor）来执行此操作？

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

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

Answer 1

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

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();
  }
}