Angular中如何截取QueryList并展示指定数量的带指令子组件？

核心思路 #

你通过@ContentChildren获取的ThyAvatarComponent实例是已经被Angular实例化且绑定了*showDetailTip指令的组件，不需要重新渲染它们，只需要控制这些实例的显示/隐藏即可。直接用slicePipe遍历数组尝试渲染会导致Angular无法识别已有的组件实例与指令关联，因为这些组件不是动态创建的。

具体实现步骤 #

1. 组件类中维护截取后的子集 #

在AvatarListComponent中，监听QueryList的变化，每次变化时更新截取后的子集数组：

import { Component, ContentChildren, QueryList, OnInit } from '@angular/core';
import { ThyAvatarComponent } from './thy-avatar.component';

@Component({
  selector: 'thy-avatar-list',
  templateUrl: './avatar-list.component.html'
})
export class AvatarListComponent implements OnInit {
  @ContentChildren(ThyAvatarComponent) avatarComponents!: QueryList<ThyAvatarComponent>;
  
  // 保存截取后的组件实例
  slicedAvatars: ThyAvatarComponent[] = [];

  // 可配置显示数量，比如默认显示前3个
  @Input() showCount = 3;

  ngOnInit(): void {
    this.updateSlicedAvatars();
    // 监听QueryList变化，实时更新子集
    this.avatarComponents.changes.subscribe(() => {
      this.updateSlicedAvatars();
    });
  }

  private updateSlicedAvatars(): void {
    const allAvatars = this.avatarComponents.toArray();
    this.slicedAvatars = allAvatars.slice(0, this.showCount);
  }
}

2. 模板中控制组件显示 #

在模板中遍历所有ThyAvatarComponent实例，通过*ngIf判断是否在截取后的子集中，从而控制显示：

<div class="avatar-list">
  <ng-container *ngFor="let avatar of avatarComponents">
    <thy-avatar 
      *ngIf="slicedAvatars.includes(avatar)"
      [thySrc]="avatar.thySrc"
      [showDetailTip]="avatar.showDetailTip"
    >
      <!-- 保留原内容投影的内容 -->
      <ng-container [ngTemplateOutlet]="avatar.templateRef"></ng-container>
    </thy-avatar>
  </ng-container>
  <!-- 可选：添加“更多”提示 -->
  <div *ngIf="avatarComponents.length > showCount" class="avatar-more">
    +{{ avatarComponents.length - showCount }}
  </div>
</div>

补充说明 #

• 如果ThyAvatarComponent内部没有暴露templateRef和指令属性，需要在该组件中添加对应的定义：

  import { Component, Input, TemplateRef, ContentChild } from '@angular/core';
  import { ShowDetailTipDirective } from './show-detail-tip.directive';
  
  @Component({
    selector: 'thy-avatar',
    templateUrl: './thy-avatar.component.html'
  })
  export class ThyAvatarComponent {
    @Input() thySrc!: string;
    @ContentChild(TemplateRef) templateRef!: TemplateRef<any>;
    @ContentChild(ShowDetailTipDirective) showDetailTip!: ShowDetailTipDirective;
  }
  

• 这种方式完全保留了原组件的所有指令逻辑，因为我们只是控制已有组件的显示状态，没有重新创建组件实例。

内容的提问来源于stack exchange，提问作者San Old