Angular Academy · Lezione

Query della vista con viewChild

Esegua query sugli elementi figli come signal.

Query della vista con viewChild è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Interrogazione della view

I componenti hanno spesso bisogno di un riferimento a un elemento o a un componente figlio nel proprio template. Angular moderno fornisce la funzione di query basata sui signal viewChild().

Dichiarare un viewChild

Chiami viewChild() passando il nome di un riferimento al template o il tipo di un componente. Il risultato è un signal.

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

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

Leggere la query

Come tutti i signal, una query della view si legge chiamandola. Restituisce l'elemento trovato oppure undefined finché la view non è pronta.

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

Interrogare un componente figlio

Passi una classe di componente per ottenere un riferimento tipizzato all'istanza del componente figlio.

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

child = viewChild(ChildComponent);

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

Query obbligatorie della view

Usi viewChild.required() quando l'elemento cercato deve esistere. Il signal diventa quindi non nullable.

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

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

Interrogare più elementi

viewChildren() restituisce un signal che contiene un array in sola lettura di tutte le corrispondenze.

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

items = viewChildren(ItemComponent);

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

Quando vengono risolte le query

Le query della view basate sui signal vengono risolte dopo l'inizializzazione della view. Leggendole in un effect si garantisce di agire quando sono disponibili.

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

viewChild vs decoratore ViewChild

Il signal viewChild() sostituisce il decoratore classico @ViewChild, integrandosi con i signal ed evitando in molti casi di gestire manualmente i tempi del ciclo di vita.

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

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

Leggere un token specifico

L'opzione read consente di interrogare un token diverso dall'elemento trovato, ad esempio una direttiva o ElementRef.

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

contentChild per la proiezione

Per il contenuto proiettato, invece che per la view del componente stesso, usi le query parallele contentChild() e contentChildren().

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

header = contentChild(HeaderComponent);

Scegliere la query corretta

Usi le query della view per il proprio template e le query del contenuto per il contenuto proiettato; scelga la variante required quando il target deve esistere e la variante plurale per le raccolte.

Verifica rapida

Verifichi la propria comprensione delle query della view basate sui signal.

Riepilogo

Il signal viewChild() interroga gli elementi e i componenti figlio nella view di un componente; usi viewChild.required() per target garantiti, viewChildren() per le raccolte, l'opzione read per token specifici e contentChild() per il contenuto proiettato.

Domande Frequenti

La lezione «Query della vista con viewChild» è gratuita?

Sì — il testo completo di «Query della vista con viewChild» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Query della vista con viewChild»?

Esegua query sugli elementi figli come signal. Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Query della vista con viewChild»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy