0Pricing
Angular Academy · Урок

Запросы представления с viewChild

Получайте дочерние элементы как сигналы.

«Запросы представления с viewChild» — бесплатный урок Angular Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Запрос к представлению

Компонентам часто нужна ссылка на элемент или дочерний компонент в их шаблоне. Современный Angular предоставляет функцию запроса на основе сигналов viewChild().

Объявление viewChild

Вызовите viewChild(), передав имя ссылочного элемента шаблона или тип компонента. Результатом будет сигнал.

import { Component, viewChild, ElementRef } from "@angular/core";

@Component({
  selector: "app-form",
  template: "<input #box>"
})
export class FormComponent {
  box = viewChild<ElementRef>("box");
}

Чтение запроса

Как и все сигналы, запрос к представлению читается вызовом. Он возвращает найденный элемент или undefined, пока представление не готово.

focus() {
  this.box()?.nativeElement.focus();
}

Запрос дочернего компонента

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

import { viewChild } from "@angular/core";

child = viewChild(ChildComponent);

run() {
  this.child()?.doSomething();
}

Обязательные запросы к представлению

Используйте viewChild.required(), если запрашиваемый элемент должен существовать. В таком случае сигнал не допускает значение null.

box = viewChild.required<ElementRef>("box");

focus() {
  this.box().nativeElement.focus(); // no optional chaining
}

Запрос нескольких элементов

viewChildren() возвращает сигнал, содержащий массив только для чтения со всеми найденными элементами.

import { viewChildren } from "@angular/core";

items = viewChildren(ItemComponent);

count() {
  return this.items().length;
}

Когда запросы разрешаются

Запросы к представлению на основе сигналов разрешаются после инициализации представления. Чтение запроса внутри effect гарантирует, что действия выполняются после его появления.

constructor() {
  effect(() => {
    const el = this.box();
    if (el) el.nativeElement.focus();
  });
}

viewChild и декоратор ViewChild

Сигнальный запрос viewChild() заменяет классический декоратор @ViewChild, интегрируется с сигналами и во многих случаях избавляет от ручного управления временем выполнения этапов жизненного цикла.

// classic:
@ViewChild("box") box!: ElementRef;

// modern:
box = viewChild<ElementRef>("box");

Чтение определённого токена

Параметр read позволяет запросить другой токен у найденного элемента, например директиву или ElementRef.

tooltip = viewChild("trigger", { read: TooltipDirective });

contentChild для проекции

Для спроецированного содержимого, а не собственного представления компонента, используйте соответствующие запросы contentChild() и contentChildren().

import { contentChild } from "@angular/core";

header = contentChild(HeaderComponent);

Выбор подходящего запроса

Используйте запросы к представлению для собственного шаблона, а запросы к содержимому — для спроецированного содержимого; выбирайте обязательный вариант, если целевой объект должен существовать, а множественный — для коллекций.

Быстрая проверка

Проверьте своё понимание запросов к представлению на основе сигналов.

Итоги

Сигнал viewChild() запрашивает элементы и дочерние компоненты в представлении компонента; используйте viewChild.required() для гарантированно существующих целей, viewChildren() для коллекций, параметр read для определённых токенов, а contentChild() — для спроецированного содержимого.

Часто задаваемые вопросы

Урок «Запросы представления с viewChild» бесплатный?

Да — полный текст урока «Запросы представления с viewChild» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Запросы представления с viewChild»?

Получайте дочерние элементы как сигналы. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Запросы представления с viewChild»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Входные сигналы с input()
  2. Обязательные и преобразуемые входные данные
  3. Выходные данные с output()
  4. Запросы представления с viewChild
← Назад к Angular Academy