Visningsspørringer med viewChild
Finn underelementer som signaler.
Visningsspørringer med viewChild er en gratis leksjon i Angular Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Angular Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Angular Academy inneholder totalt 4 leksjoner.
Spørring i visningen
Komponenter trenger ofte en referanse til et element eller en underkomponent i malen. Moderne Angular tilbyr den signalbaserte spørringsfunksjonen viewChild().
Deklarere en viewChild
Kall viewChild() med et malreferansenavn eller en komponenttype. Resultatet er et signal.
import { Component, viewChild, ElementRef } from "@angular/core";
@Component({
selector: "app-form",
template: "<input #box>"
})
export class FormComponent {
box = viewChild<ElementRef>("box");
}Lese spørringen
Som med alle signaler leser De en view-spørring ved å kalle den. Den returnerer det samsvarende elementet eller undefined frem til visningen er klar.
focus() {
this.box()?.nativeElement.focus();
}Spørre etter en underkomponent
Send inn en komponentklasse for å få en typesatt referanse til en instans av underkomponenten.
import { viewChild } from "@angular/core";
child = viewChild(ChildComponent);
run() {
this.child()?.doSomething();
}Obligatoriske view-spørringer
Bruk viewChild.required() når det spurte elementet må finnes. Signalet blir da ikke-nullbart.
box = viewChild.required<ElementRef>("box");
focus() {
this.box().nativeElement.focus(); // no optional chaining
}Spørre etter flere elementer
viewChildren() returnerer et signal som inneholder en skrivebeskyttet matrise med alle treffene.
import { viewChildren } from "@angular/core";
items = viewChildren(ItemComponent);
count() {
return this.items().length;
}Når spørringer løses
Signalbaserte view-spørringer løses etter at visningen er initialisert. Ved å lese dem i en effect sikrer De at handlingen utføres når de er tilgjengelige.
constructor() {
effect(() => {
const el = this.box();
if (el) el.nativeElement.focus();
});
}viewChild kontra ViewChild-dekoratoren
Signalfunksjonen viewChild() erstatter den klassiske @ViewChild-dekoratoren, integreres med signaler og gjør det i mange tilfeller unødvendig å håndtere tidspunktet i livssyklusen manuelt.
// classic:
@ViewChild("box") box!: ElementRef;
// modern:
box = viewChild<ElementRef>("box");Lese et spesifikt token
Alternativet read lar Dem spørre etter et annet token fra det samsvarende elementet, for eksempel en direktiv eller ElementRef.
tooltip = viewChild("trigger", { read: TooltipDirective });contentChild for projisering
For projisert innhold i stedet for komponentens egen visning bruker De de tilsvarende spørringene contentChild() og contentChildren().
import { contentChild } from "@angular/core";
header = contentChild(HeaderComponent);Velge riktig spørring
Bruk view-spørringer for Deres egen mal og innholdsspørringer for projisert innhold. Velg den obligatoriske varianten når målet må finnes, og flertallsvarianten for samlinger.
Rask kontroll
Test forståelsen Deres av signalbaserte view-spørringer.
Oppsummering
Signalfunksjonen viewChild() spør etter elementer og underkomponenter i en komponentvisning. Bruk viewChild.required() for garanterte mål, viewChildren() for samlinger, alternativet read for spesifikke token og contentChild() for projisert innhold.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 38
- Leksjoner
- 144
Ofte stilte spørsmål
Er leksjonen «Visningsspørringer med viewChild» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Angular Academy, inkludert «Visningsspørringer med viewChild», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Angular Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Visningsspørringer med viewChild»?
Finn underelementer som signaler. Du øver på Angular Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Angular Academy?
Ingen tidligere erfaring er nødvendig. Angular Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Visningsspørringer med viewChild»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Angular Academy-leksjonen?
Ja. Alle Angular Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Signalinput med input()
- Påkrevde og transformerende inputverdier
- Outputs med output()
- Visningsspørringer med viewChild