Angular2：如何将可迭代ID存储到div标签的#引用变量中？求示例

首先得明确一点：你没法直接把user.id赋值给#开头的模板引用变量——因为这类变量是静态声明的，在模板编译时就固定了，不能动态生成变量名。不过我们可以通过其他方式把迭代的ID和对应的DOM元素引用关联起来，下面给你两种实用的实现方案：

方案一：使用@ViewChildren结合自定义属性绑定 #

这是最直接的方式，我们给每个迭代的元素加一个静态的模板引用变量，同时把user.id绑定到元素的自定义属性上，之后在组件里批量获取这些元素并关联ID。

模板代码 #

<!-- user-list.component.html -->
<div *ngFor="let user of users" #userItem [attr.data-user-id]="user.id">
  {{ user.name }} (用户ID: {{ user.id }})
</div>

组件代码 #

// user-list.component.ts
import { Component, ViewChildren, QueryList, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html'
})
export class UserListComponent implements AfterViewInit {
  // 模拟用户数据
  users = [
    { id: 101, name: '张三' },
    { id: 102, name: '李四' },
    { id: 103, name: '王五' }
  ];

  // 获取所有带#userItem模板变量的元素
  @ViewChildren('userItem') userElements!: QueryList<ElementRef>;

  // 视图初始化完成后处理元素
  ngAfterViewInit(): void {
    // 可以创建一个Map来存储ID和元素的映射
    const userElementMap = new Map<number, ElementRef>();

    this.userElements.forEach(elementRef => {
      // 从自定义属性中取出用户ID
      const userId = parseInt(elementRef.nativeElement.getAttribute('data-user-id'), 10);
      // 存入映射表
      userElementMap.set(userId, elementRef);
    });

    // 示例：根据ID获取元素并操作
    const targetElement = userElementMap.get(102)?.nativeElement;
    if (targetElement) {
      targetElement.style.backgroundColor = '#f0f8ff';
      console.log('找到ID为102的元素:', targetElement);
    }
  }
}

方案二：使用自定义指令封装关联逻辑 #

如果你的项目中经常需要做这类关联，自定义指令会更优雅，它可以把ID和元素的绑定逻辑封装起来，方便复用。

第一步：创建服务存储元素映射 #

// user-element.service.ts
import { Injectable } from '@angular/core';
import { ElementRef } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UserElementService {
  private elementMap = new Map<number, ElementRef>();

  // 添加ID与元素的关联
  addElement(userId: number, elementRef: ElementRef): void {
    this.elementMap.set(userId, elementRef);
  }

  // 根据ID获取元素
  getElement(userId: number): ElementRef | undefined {
    return this.elementMap.get(userId);
  }
}

第二步：创建自定义指令 #

// user-element.directive.ts
import { Directive, ElementRef, Input, OnInit } from '@angular/core';
import { UserElementService } from './user-element.service';

@Directive({
  selector: '[appBindUserId]'
})
export class UserElementDirective implements OnInit {
  // 接收传入的用户ID
  @Input('appBindUserId') userId!: number;

  constructor(
    private el: ElementRef,
    private userElementService: UserElementService
  ) {}

  ngOnInit(): void {
    // 把当前元素和ID关联存入服务
    this.userElementService.addElement(this.userId, this.el);
  }
}

第三步：在模板中使用指令 #

<!-- user-list.component.html -->
<div *ngFor="let user of users" [appBindUserId]="user.id">
  {{ user.name }} (用户ID: {{ user.id }})
</div>

第四步：在组件中使用服务获取元素 #

// user-list.component.ts
import { Component, OnInit } from '@angular/core';
import { UserElementService } from './user-element.service';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html'
})
export class UserListComponent implements OnInit {
  users = [
    { id: 101, name: '张三' },
    { id: 102, name: '李四' },
    { id: 103, name: '王五' }
  ];

  constructor(private userElementService: UserElementService) {}

  ngOnInit(): void {
    // 延迟一点确保视图初始化完成（或者用AfterViewInit）
    setTimeout(() => {
      const targetElement = this.userElementService.getElement(103)?.nativeElement;
      if (targetElement) {
        targetElement.style.color = '#ff4500';
      }
    }, 0);
  }
}

关键说明：可迭代值与引用变量的关联方式 #

Angular不允许动态生成模板引用变量名，但我们可以通过以下两种思路实现需求：

1. 属性绑定存储ID：把可迭代的ID绑定到DOM元素的自定义属性上，再通过@ViewChildren批量获取元素后，取出属性值完成关联。
2. 指令封装关联逻辑：通过自定义指令接收ID，在指令内部把元素引用和ID存入服务，后续通过服务直接根据ID获取元素。

这两种方式都能实现你想要的“将可迭代ID与div元素引用关联”的效果，具体选哪种取决于你的复用需求。

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