如何在angular 5中选择循环中的dom元素

在Angular 5中选择循环中的DOM元素可以通过以下几种方式实现：

1. 使用模板引用变量（Template Reference Variables）：在循环的DOM元素上添加一个模板引用变量，然后通过该变量在组件中访问该元素。例如，假设有一个循环的列表，可以在列表项的元素上添加一个模板引用变量，如下所示：<ul> <li *ngFor="let item of items" #listItem>{{ item }}</li> </ul>然后在组件中使用@ViewChild装饰器来获取该元素的引用：import { Component, ViewChild, ElementRef } from '@angular/core'; @Component({ selector: 'app-example', template: ` <ul> <li *ngFor="let item of items" #listItem>{{ item }}</li> </ul> ` }) export class ExampleComponent { @ViewChild('listItem') listItem: ElementRef; ngAfterViewInit() { console.log(this.listItem.nativeElement); } }这样就可以在ngAfterViewInit生命周期钩子中访问该元素。
2. 使用@ViewChildren装饰器：如果需要选择循环中的多个元素，可以使用@ViewChildren装饰器。与@ViewChild类似，但是返回的是一个QueryList对象，可以通过toArray()方法将其转换为数组。例如：import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core'; @Component({ selector: 'app-example', template: ` <ul> <li *ngFor="let item of items" #listItem>{{ item }}</li> </ul> ` }) export class ExampleComponent { @ViewChildren('listItem') listItems: QueryList<ElementRef>; ngAfterViewInit() { this.listItems.toArray().forEach(item => console.log(item.nativeElement)); } }这样就可以在ngAfterViewInit生命周期钩子中访问所有循环中的元素。
3. 使用ng-container和ng-template：如果不想在DOM中添加额外的元素，可以使用ng-container和ng-template来选择循环中的元素。例如：<ng-container *ngFor="let item of items; let i = index"> <ng-template #itemTemplate> <div>{{ item }}</div> </ng-template> </ng-container>然后在组件中使用@ViewChild或@ViewChildren装饰器来获取ng-template的引用，并使用TemplateRef来访问模板内容。例如：import { Component, ViewChild, ViewChildren, QueryList, TemplateRef } from '@angular/core'; @Component({ selector: 'app-example', template: ` <ng-container *ngFor="let item of items; let i = index"> <ng-template #itemTemplate> <div>{{ item }}</div> </ng-template> </ng-container> ` }) export class ExampleComponent { @ViewChild('itemTemplate') itemTemplate: TemplateRef<any>; @ViewChildren('itemTemplate') itemTemplates: QueryList<TemplateRef<any>>; ngAfterViewInit() { console.log(this.itemTemplate); this.itemTemplates.toArray().forEach(template => console.log(template)); } }这样就可以在ngAfterViewInit生命周期钩子中访问ng-template。

以上是在Angular 5中选择循环中的DOM元素的几种方法，根据具体需求选择合适的方式。对于更复杂的DOM操作，可以考虑使用自定义指令或组件来实现。关于Angular的更多信息和相关产品，可以参考腾讯云的Angular产品介绍。