如何为ngForTemplate渲染的每个项添加属性指令并在组件中访问？

1. 创建属性指令 #

先实现用于添加类、存储尺寸的属性指令：

import { Directive, ElementRef, Input, OnInit } from '@angular/core';

@Directive({
  selector: '[appItemHandler]'
})
export class ItemHandlerDirective implements OnInit {
  @Input() boundItem: any;
  elementDimensions: { width: number; height: number } | null = null;

  constructor(private elRef: ElementRef) {}

  ngOnInit() {
    // 自动为渲染项添加样式类
    this.elRef.nativeElement.classList.add('rendered-item');
  }

  // 捕获元素尺寸的方法
  captureDimensions() {
    const rect = this.elRef.nativeElement.getBoundingClientRect();
    this.elementDimensions = { width: rect.width, height: rect.height };
    return this.elementDimensions;
  }
}

2. 修改MyComponent的模板与类 #

不再直接依赖ngForTemplate，而是在组件内部用ngFor循环，通过带指令的容器包裹用户提供的模板内容，让用户无需手动添加指令，同时组件能查询到所有指令实例：

组件模板 #

<ng-template
  ngFor
  let-item
  [ngForOf]="items"
  [ngForTrackBy]="trackByFunction"
>
  <!-- 自动为每个渲染项绑定指令，包裹用户模板内容 -->
  <div appItemHandler [boundItem]="item">
    <ng-container *ngTemplateOutlet="template; context: { $implicit: item }"></ng-container>
  </div>
</ng-template>

组件类代码 #

import { Component, Input, ContentChild, TemplateRef, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { ItemHandlerDirective } from './item-handler.directive';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements AfterViewInit {
  @Input() items: any[] = [];
  // 获取用户传入的模板
  @ContentChild(TemplateRef) template!: TemplateRef<any>;
  // 查询所有渲染项的指令实例
  @ViewChildren(ItemHandlerDirective) itemDirectives!: QueryList<ItemHandlerDirective>;

  ngAfterViewInit() {
    // 监听指令列表变化，批量处理指令
    this.itemDirectives.changes.subscribe(() => {
      this.processDirectives();
    });

    // 初始化时触发一次处理
    this.processDirectives();
  }

  private processDirectives() {
    this.itemDirectives.forEach(dir => {
      console.log('绑定的数据:', dir.boundItem);
      // 调用指令方法捕获尺寸
      dir.captureDimensions();
      console.log('元素尺寸:', dir.elementDimensions);
    });
  }

  trackByFunction(index: number, item: any) {
    return item.id || index; // 优化渲染性能
  }
}

3. 用户侧使用方式不变 #

用户无需修改原有代码，依然按之前的方式使用组件：

<my-component [items]="items">
  <ng-template let-item>
    {{item.name}}
  </ng-template>
</my-component>

关键说明 #

• 之前用ContentChild/ViewChild查询失败的原因：用户提供的模板属于内容投影区域，但渲染后的DOM是组件内部ngFor生成的视图内容，必须用ViewChildren结合指令选择器才能查询到实例。
• 用容器包裹用户模板的方式，既实现了指令的自动注入，又保证了组件能直接访问所有指令实例，满足添加类、存储尺寸等需求。

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