Что такое ViewChild?

Что такое ViewChild?

ViewChild — это декоратор в Angular, который предоставляет механизм для доступа к дочерним элементам (child elements) непосредственно из компонента. Он позволяет получить ссылку на элемент DOM, директиву или компонент, размещённый в шаблоне текущего компонента. Это ключевой инструмент для взаимодействия с шаблоном (template) на уровне TypeScript кода, когда стандартных средств привязки данных недостаточно.

Основное назначение и использование

ViewChild используется, когда необходимо:

• Взаимодействовать с нативными DOM-элементами (например, для фокусировки, чтения значений, управления стилями).
• Обращаться к функционалу дочерних компонентов (вызывать их методы, получать доступ к свойствам).
• Использовать директивы и их API.
• Интегрироваться со сторонними библиотеками (например, инициализировать графики Chart.js на элементе <canvas>).

Синтаксис и параметры

Декоратор применяется к свойству класса компонента и принимает один или два аргумента:

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { MyChildComponent } from './my-child.component';

@Component({
  selector: 'app-parent',
  template: `
    <input #myInput type="text">
    <app-my-child></app-my-child>
  `
})
export class ParentComponent implements AfterViewInit {
  // 1. Поиск по ссылочной переменной (template reference variable)
  @ViewChild('myInput') myInputField: ElementRef;

  // 2. Поиск по типу дочернего компонента
  @ViewChild(MyChildComponent) childComponent: MyChildComponent;

  ngAfterViewInit() {
    // Доступ возможен только после инициализации представления
    this.myInputField.nativeElement.focus();
    const childData = this.childComponent.getData();
  }
}

Ключевые параметры:

• Первый аргумент (selector): может быть строкой (имя ссылочной переменной в шаблоне, начинается с #) или типом класса (Component, Directive).
• Второй аргумент (options): объект конфигурации. Наиболее важное свойство — static.

    *   `static: true` — запрос разрешается **до запуска обнаружения изменений** (Change Detection). Используется, если элемент всегда присутствует и не зависит от структурных директив (`*ngIf`, `*ngFor`). Доступен уже в хуке `ngOnInit()`.
    *   `static: false` (значение по умолчанию) — запрос разрешается **после каждого цикла обнаружения изменений**. Элемент будет доступен в хуке `ngAfterViewInit()` и позже.

Важные аспекты и лучшие практики

1. Время доступа: Полученные через @ViewChild() ссылки становятся доступны не сразу после конструктора компонента, а после инициализации представления. Для работы с ними используется хук жизненного цикла ngAfterViewInit(). Попытка доступа раньше (например, в ngOnInit) приведёт к undefined.

2. ElementRef и nativeElement: При запросе DOM-элемента, свойство будет иметь тип ElementRef. Это обёртка Angular, которая предоставляет доступ к нативному DOM-объекту через свойство nativeElement. Прямое манипулирование nativeElement следует минимизировать, чтобы оставаться в рамках архитектуры Angular. Для безопасной работы с DOM предпочтительнее использовать Renderer2.

3. Изменение статических элементов: Если запрашиваемый элемент условно отображается через *ngIf, и значение static установлено в false, то свойство @ViewChild() будет автоматически обновляться при появлении/исчезновении элемента. Для отслеживания этих изменений можно использовать сеттер или геттер.

   @ViewChild('conditionalInput', { read: ElementRef })
   set input(v: ElementRef) {
     if (v) {
       // Элемент появился в DOM
       setTimeout(() => v.nativeElement.focus());
     }
   }
   

4. ViewChildren для нескольких элементов: Если в шаблоне существует несколько элементов по одному селектору (например, несколько экземпляров дочернего компонента или элементы в *ngFor), используется декоратор @ViewChildren(). Он возвращает QueryList — итерируемую коллекцию, которая может быть подписана на изменения.

Пример практического применения

Распространённый сценарий — установка фокуса на поле ввода после его отображения:

@Component({
  selector: 'app-search',
  template: `<input #searchBox placeholder="Поиск...">`
})
export class SearchComponent implements AfterViewInit {
  @ViewChild('searchBox') searchInput: ElementRef;

  ngAfterViewInit() {
    this.searchInput.nativeElement.focus();
  }

  clear() {
    this.searchInput.nativeElement.value = '';
    this.searchInput.nativeElement.focus();
  }
}

Итог: ViewChild — это мощный и необходимый инструмент в арсенале Angular-разработчика, который заполняет пробел между декларативной шаблонизацией и императивной логикой компонента. Его корректное использование требует понимания жизненного цикла компонента и архитектурных принципов Angular, таких как разделение ответственности и безопасная работа с DOM.