Angular 4/5中如何为ngFor生成的动态元素分配Hash ID引用ID？

我完全懂你的困扰——静态模板引用变量（比如#food）没法直接和*ngFor配合，毕竟*ngFor生成的是动态元素，静态@ViewChild只能抓取单个固定元素。下面给你两种实用的解决方案：

方案一：用@ViewChildren批量获取容器，结合索引对应 #

适合需要统一管理所有容器的场景：

1. 模板层实现：
   给*ngFor循环的每个ng-container设置统一的模板引用变量，同时绑定循环索引：

   <ng-container *ngFor="let item of containerList; let i = index" #dynamicContainer></ng-container>
   

   这里的containerList是你用来生成30+容器的数据源（比如一个包含对应数量元素的数组）。

2. 组件类实现：
   用@ViewChildren替代@ViewChild，一次性获取所有ViewContainerRef实例，之后就能通过索引或遍历访问每个容器：

   import { Component, ViewChildren, QueryList, ViewContainerRef, AfterViewInit } from '@angular/core';
   
   @Component({
     selector: 'app-your-component',
     templateUrl: './your-component.component.html'
   })
   export class YourComponent implements AfterViewInit {
     // 示例：生成30个空元素作为循环数据源
     containerList = Array(30).fill(null);
     @ViewChildren('dynamicContainer', { read: ViewContainerRef }) 
     containerRefs!: QueryList<ViewContainerRef>;
   
     ngAfterViewInit(): void {
       // 获取第一个容器
       const firstContainer = this.containerRefs.first;
       // 通过索引获取第三个容器（索引从0开始）
       const thirdContainer = this.containerRefs.get(2);
       // 遍历所有容器做自定义操作
       this.containerRefs.forEach((container, index) => {
         console.log(`第${index+1}个容器的引用：`, container);
         // 这里可以添加动态加载组件等逻辑
       });
     }
   }
   

方案二：模板直接绑定引用到组件数组 #

适合需要单独跟踪每个容器状态的场景：

1. 组件类实现：
   先定义数组存储每个容器的引用，再写一个方法用来收集这些引用：

   import { Component, ViewContainerRef } from '@angular/core';
   
   @Component({
     selector: 'app-your-component',
     templateUrl: './your-component.component.html'
   })
   export class YourComponent {
     containerList = Array(30).fill(null);
     containerRefs: ViewContainerRef[] = [];
   
     // 收集每个容器的引用
     collectContainerRef(ref: ViewContainerRef) {
       if (ref && !this.containerRefs.includes(ref)) {
         this.containerRefs.push(ref);
       }
     }
   }
   

2. 模板层实现：
   在*ngFor里调用收集方法，把每个ng-container的引用传递进去：

   <ng-container 
     *ngFor="let item of containerList" 
     #dynamicContainer
     (init)="collectContainerRef(dynamicContainer)"
   ></ng-container>
   

   这里的(init)事件会在元素初始化时触发，确保引用被正确捕获。之后你就能通过this.containerRefs[index]访问对应位置的容器了。

关键注意事项 #

• 务必在ngAfterViewInit生命周期钩子之后操作容器引用，只有视图完全初始化后，ViewContainerRef才会被正确赋值。
• 如果你的数据源会动态增减元素，记得监听QueryList的changes事件来更新逻辑：

  ngAfterViewInit(): void {
    this.containerRefs.changes.subscribe(() => {
      // 容器列表变化时的处理逻辑
    });
  }
  

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