# 使用Angular2获取ngFor中创建元素的引用
Angular2中的ngFor指令是一个强大的工具，用于在模板中迭代数组或集合并创建相应的元素。然而，有时我们需要在组件中获取这些动态创建元素的引用，以便在运行时进行操作或与其交互。在本文中，我们将讨论如何实现这一目标，并提供一个简单的案例代码来说明这个过程。## ngFor和模板引用变量首先，让我们回顾一下ngFor指令和模板引用变量的基本概念。ngFor允许我们遍历数组并为每个元素生成相应的DOM元素。而模板引用变量是通过在元素上使用#符号定义的变量，用于引用该元素。html在上面的例子中，我们使用了ngFor来遍历名为`items`的数组，并为每个元素创建一个包含其名称的`div`元素。我们还通过`#itemElement`定义了一个模板引用变量，用于引用每个动态创建的`div`元素。## 获取引用并在组件中使用要在组件中获取这些动态创建元素的引用，我们可以使用`@ViewChildren`装饰器。这个装饰器允许我们查询视图中的元素，并将结果作为`QueryList`返回。在我们的组件中，我们可以使用`@ViewChildren`来获取ngFor中创建的元素引用。{{ item.name }}
typescriptimport { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';@Component({ selector: 'app-root', template: ` {{ item.name }} `})export class AppComponent { items = [{ name: 'Item 1' }, { name: 'Item 2' }, { name: 'Item 3' }]; // 使用ViewChildren和QueryList获取引用 @ViewChildren('itemElement') itemElements: QueryList; ngAfterViewInit() { // 在视图初始化后，可以通过itemElements访问ngFor中创建的元素引用 this.itemElements.forEach((itemElement, index) => { console.log(`Item ${index + 1}: `, itemElement.nativeElement); }); }} 在上面的代码中，我们使用`@ViewChildren('itemElement')`装饰器来获取所有带有`itemElement`模板引用变量的元素。然后，我们在`ngAfterViewInit`生命周期钩子中访问这些元素的引用，并在控制台中输出它们。## 通过使用ngFor指令和模板引用变量，以及@ViewChildren装饰器，我们可以轻松地在Angular2中获取动态创建元素的引用。这使得在运行时对这些元素进行操作变得更加灵活和方便。希望这篇文章对你理解如何在Angular2中获取ngFor中创建元素的引用有所帮助。在实际应用中，你可以根据具体的需求进一步扩展和优化这个基本的示例代码。