0Pricing
Angular Academy · Lekcja

Zapytania widoku za pomocą viewChild

Pobieraj informacje o elementach potomnych jako sygnały.

Zapytania widoku za pomocą viewChild to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Odpytywanie widoku

Komponenty często potrzebują odwołania do elementu lub komponentu potomnego w swoim szablonie. Nowoczesny Angular udostępnia opartą na sygnałach funkcję zapytań viewChild().

Deklarowanie viewChild

Wywołaj viewChild(), podając nazwę referencji szablonu lub typ komponentu. Wynikiem jest sygnał.

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

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

Odczytywanie zapytania

Podobnie jak wszystkie sygnały, zapytanie widoku odczytuje się przez jego wywołanie. Zwraca ono dopasowany element lub undefined, dopóki widok nie będzie gotowy.

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

Odpytywanie komponentu potomnego

Przekaż klasę komponentu, aby uzyskać typowane odwołanie do instancji komponentu potomnego.

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

child = viewChild(ChildComponent);

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

Wymagane zapytania widoku

Użyj viewChild.required(), gdy odpytywany element musi istnieć. Sygnał nie może wtedy mieć wartości null ani undefined.

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

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

Odpytywanie wielu elementów

viewChildren() zwraca sygnał zawierający tablicę tylko do odczytu ze wszystkimi dopasowaniami.

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

items = viewChildren(ItemComponent);

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

Kiedy zapytania są rozstrzygane

Oparte na sygnałach zapytania widoku są rozstrzygane po zainicjalizowaniu widoku. Odczytanie ich w effect gwarantuje wykonanie działania dopiero wtedy, gdy będą dostępne.

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

viewChild a dekorator ViewChild

Oparty na sygnałach viewChild() zastępuje klasyczny dekorator @ViewChild, integrując się z sygnałami i w wielu przypadkach eliminując konieczność ręcznego pilnowania cyklu życia.

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

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

Odczytywanie konkretnego tokenu

Opcja read pozwala odpytać dopasowany element o inny token, na przykład dyrektywę lub ElementRef.

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

contentChild dla projekcji

W przypadku treści poddanej projekcji, a nie własnego widoku komponentu, użyj równoległych zapytań contentChild() i contentChildren().

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

header = contentChild(HeaderComponent);

Wybór właściwego zapytania

Zapytania widoku służą do własnego szablonu, a zapytania treści do treści poddanej projekcji. Wybierz wariant wymagany, gdy element docelowy musi istnieć, oraz wariant mnogi dla kolekcji.

Szybki sprawdzian

Sprawdź swoją wiedzę na temat zapytań widoku opartych na sygnałach.

Podsumowanie

Sygnał viewChild() odpyta elementy i komponenty potomne w widoku komponentu. Użyj viewChild.required() dla gwarantowanych elementów docelowych, viewChildren() dla kolekcji, opcji read dla konkretnych tokenów, a contentChild() dla treści poddanej projekcji.

Często zadawane pytania

Czy lekcja „Zapytania widoku za pomocą viewChild” jest bezpłatna?

Tak — pełny tekst „Zapytania widoku za pomocą viewChild” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Zapytania widoku za pomocą viewChild”?

Pobieraj informacje o elementach potomnych jako sygnały. Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Zapytania widoku za pomocą viewChild”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Dane wejściowe sygnałów za pomocą input()
  2. Wymagane i przekształcane dane wejściowe
  3. Wyjścia za pomocą output()
  4. Zapytania widoku za pomocą viewChild
← Powrót do Angular Academy