Для доступа к массиву DOM-элементов в Angular можно использовать несколько способов. Рассмотрим каждый из них подробнее.
1. Шаблонная ссылка (Template reference):
В Angular вы можете использовать шаблонные ссылки для получения доступа к DOM-элементам. Шаблонная ссылка - это префикс #, за которым следует имя переменной, которое вы выбираете. Например, вы можете присвоить шаблонную ссылку элементу <div> с помощью #myDiv. Затем вы можете получить доступ к этому элементу в коде компонента, используя @ViewChild декоратор и передавая имя шаблонной ссылки в качестве аргумента.
Пример:
В шаблоне компонента:
<div #myDiv></div>
В файле компонента:
@ViewChild('myDiv') myDiv: ElementRef;
Вы можете получить доступ к массиву DOM-элементов, используя querySelectorAll метод через nativeElement:
let elements: NodeList = this.myDiv.nativeElement.querySelectorAll('.myClass');
2. Angular директива:
Вы также можете создать собственную директиву для доступа к массиву DOM-элементов. Директива - это класс, который может быть присоединен к элементу DOM и выполнять дополнительную логику. Для получения доступа к массиву DOM-элементов, вы можете использовать ElementRef внедрение зависимости в вашу директиву, а затем использовать nativeElement и методы доступные для него, например querySelectorAll, чтобы получить нужные вам элементы.
Пример:
import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[myDirective]'
})
export class MyDirective {
constructor(private elementRef: ElementRef) {}
ngAfterViewInit() {
let elements: NodeList = this.elementRef.nativeElement.querySelectorAll('.myClass');
}
}
Использование в шаблоне:
<div myDirective></div>
3. Использование событий и шаблон референс переменной:
Вы также можете использовать события и шаблонные ссылки для доступа к DOM-элементам. Например, вы можете присвоить шаблонную ссылку элементу <div> с помощью #myDiv, а затем использовать событие, например ngAfterViewInit(), для получения доступа к этому элементу в вашем компоненте. Здесь вы можете использовать querySelectorAll метод для получения массива необходимых элементов.
Пример:
В шаблоне компонента:
<div #myDiv></div>
В файле компонента:
ngAfterViewInit() {
let elements: NodeList = this.myDiv.nativeElement.querySelectorAll('.myClass');
}
Это три основных способа доступа к массиву DOM-элементов в Angular. Выберите наиболее подходящий вариант для вашей ситуации и внедрите его в свой код.