Как на Angular 14 получить DOM элемент?

Для получения DOM элемента на Angular 14 мы можем использовать несколько подходов в зависимости от ситуации.

Первый подход - использование директивы ElementRef. ElementRef предоставляет доступ к DOM элементу, на который применяется директива. Для того, чтобы получить DOM элемент с помощью ElementRef, сначала необходимо добавить его в конструктор компонента или сервиса:

import { ElementRef } from '@angular/core';

constructor(private elementRef: ElementRef) {}

Теперь мы можем использовать elementRef.nativeElement для получения доступа к DOM элементу в любом методе компонента или сервиса:

ngOnInit() {
  const element = this.elementRef.nativeElement;
  // Дальнейшие манипуляции с элементом
}

Второй подход - использование ViewChild. ViewChild позволяет получить доступ к дочернему компоненту или DOM элементу, и он может быть использован в шаблоне или в коде компонента. Для начала нам нужно добавить хэш метку к элементу, к которому мы хотим получить доступ:

<div #myElement></div>

Затем мы можем использовать ViewChild, чтобы получить доступ к этому элементу:

import { ViewChild, ElementRef } from '@angular/core';

@ViewChild('myElement', { static: true }) myElement: ElementRef;

ngOnInit() {
  const element = this.myElement.nativeElement;
  // Дальнейшие манипуляции с элементом
}

Обратите внимание, что мы передаем хэш метку элемента в ViewChild, а также указываем объект конфигурации { static: true }, чтобы получить доступ к элементу в ngOnInit.

Третий подход - использование Renderer2. Renderer2 является сервисом Angular, который предоставляет API для манипуляции с DOM. Для начала нам нужно внедрить Renderer2 в конструктор компонента или сервиса:

import { Renderer2 } from '@angular/core';

constructor(private renderer: Renderer2) {}

Затем мы можем использовать методы Renderer2 для манипуляции с DOM элементом:

ngOnInit() {
  const element = this.renderer.createElement('div');
  // Дальнейшие манипуляции с элементом
}

В этом примере мы создаем новый DIV элемент с помощью метода createElement Renderer2, который мы можем дальше манипулировать.

В зависимости от вашей конкретной ситуации и требований, один из этих подходов может быть предпочтительнее других.