Как получить доступ к элементу DOM в шаблоне компонента Angular?

Использование @ViewChild для доступа к DOM-элементам

В Angular для доступа к элементам шаблона из класса компонента следует использовать декоратор @ViewChild. Это правильный подход, который соответствует архитектуре Angular и обеспечивает лучшую производительность и тестируемость.

Основная причина, почему не стоит использовать document.getElementById или другие прямые методы работы с DOM:

• Нарушение инкапсуляции - компонент должен работать только со своим шаблоном, а не со всей страницей
• Проблемы с SSR (Server-Side Rendering) - на сервере нет глобального объекта document
• Сложности с тестированием - тесты становятся зависимыми от реального DOM
• Риск конфликтов - если на странице несколько экземпляров компонента, id могут дублироваться

Правильное решение с @ViewChild

Вот как нужно переписать ваш компонент с использованием @ViewChild:

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

@Component({
  selector: 'app-my-form',
  template: `
    <div>
      <input #myInput type="text" placeholder="Введите текст">
      <button (click)="focusInput()">Установить фокус</button>
    </div>
  `
})
export class MyFormComponent {
  // Получаем ссылку на элемент с шаблонной переменной #myInput
  @ViewChild('myInput', { static: false })
  myInputElement!: ElementRef<HTMLInputElement>;

  focusInput() {
    // Проверяем, что элемент существует, и устанавливаем фокус
    if (this.myInputElement) {
      this.myInputElement.nativeElement.focus();
    }
  }
}

Ключевые моменты:

• Шаблонная переменная (#myInput) - создается в шаблоне с помощью символа #. Это локальная ссылка на элемент
• Декоратор @ViewChild - связывает шаблонную переменную со свойством класса
• Тип ElementRef - обертка Angular над нативным DOM-элементом
• Параметр { static: false } - указывает, что элемент будет доступен после инициализации представления (в Angular 8+)
• nativeElement - свойство, которое возвращает непосредственно DOM-элемент

Жизненный цикл и @ViewChild

Важно помнить, что @ViewChild становится доступным только после того, как Angular завершит инициализацию представления. Поэтому обращаться к нему следует в хуках жизненного цикла ngAfterViewInit или позже:

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

@Component({
  selector: 'app-my-form',
  template: `<input #myInput type="text">`
})
export class MyFormComponent implements AfterViewInit {
  @ViewChild('myInput', { static: false })
  myInputElement!: ElementRef<HTMLInputElement>;

  ngAfterViewInit() {
    // Безопасно используем элемент после инициализации
    this.myInputElement.nativeElement.value = 'Значение по умолчанию';
  }
}

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

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

@Directive({
  selector: '[appAutoFocus]'
})
export class AutoFocusDirective {
  constructor(private el: ElementRef) {}

  @HostListener('click')
  onClick() {
    this.el.nativeElement.focus();
  }
}

<input type="text" appAutoFocus placeholder="Автофокус при клике">