0Pricing
Angular Academy · Lección

Consultas de vista con viewChild

Consulte elementos secundarios como señales.

Consultas de vista con viewChild es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

Consultar la vista

Los componentes a menudo necesitan una referencia a un elemento o a un componente hijo de su plantilla. Angular moderno proporciona la función de consulta basada en señales viewChild().

Declarar un viewChild

Llame a viewChild() con un nombre de referencia de plantilla o un tipo de componente. El resultado es una señal.

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

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

Leer la consulta

Al igual que todas las señales, lea una consulta de vista llamándola. Devuelve el elemento coincidente o undefined hasta que la vista esté lista.

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

Consultar un componente hijo

Pase una clase de componente para obtener una referencia con tipo a una instancia de componente hijo.

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

child = viewChild(ChildComponent);

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

Consultas de vista obligatorias

Use viewChild.required() cuando el elemento consultado deba existir. La señal dejará de admitir valores nulos.

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

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

Consultar varios elementos

viewChildren() devuelve una señal que contiene un array de solo lectura con todas las coincidencias.

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

items = viewChildren(ItemComponent);

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

Cuándo se resuelven las consultas

Las consultas de vista basadas en señales se resuelven después de que se inicializa la vista. Leerlas en un effect garantiza que actuará cuando estén disponibles.

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

viewChild frente al decorador ViewChild

La señal viewChild() reemplaza al decorador clásico @ViewChild, se integra con las señales y evita gestionar manualmente los tiempos del ciclo de vida en muchos casos.

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

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

Leer un token específico

La opción read permite consultar un token diferente del elemento coincidente, como una directiva o ElementRef.

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

contentChild para proyección

Para el contenido proyectado, en lugar de la vista propia del componente, use las consultas equivalentes contentChild() y contentChildren().

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

header = contentChild(HeaderComponent);

Elegir la consulta adecuada

Use consultas de vista para su propia plantilla y consultas de contenido para contenido proyectado; elija la variante obligatoria cuando el destino deba existir y la variante plural para colecciones.

Comprobación rápida

Compruebe su comprensión de las consultas de vista basadas en señales.

Resumen

La señal viewChild() consulta elementos y componentes hijos en la vista de un componente; use viewChild.required() para destinos garantizados, viewChildren() para colecciones, la opción read para tokens específicos y contentChild() para contenido proyectado.

Preguntas frecuentes

¿La lección «Consultas de vista con viewChild» es gratis?

Sí — el texto completo de «Consultas de vista con viewChild» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Consultas de vista con viewChild»?

Consulte elementos secundarios como señales. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Angular Academy?

No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Consultas de vista con viewChild»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Angular Academy?

Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Inputs de señales con input()
  2. Inputs obligatorios y transformados
  3. Outputs con output()
  4. Consultas de vista con viewChild
← Volver a Angular Academy