Angular Academy · Ders

viewChild ile Görünüm Sorguları

Alt öğeleri sinyal olarak sorgulayın.

viewChild ile Görünüm Sorguları, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

Görünümü Sorgulama

Bileşenlerin şablonlarındaki bir öğeye veya alt bileşene başvurması sıkça gerekir. Modern Angular, sinyal tabanlı viewChild() sorgu işlevini sağlar.

viewChild Tanımlama

viewChild() işlevini bir şablon başvuru adıyla veya bileşen türüyle çağırın. Sonuç bir sinyaldir.

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

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

Sorguyu Okuma

Tüm sinyallerde olduğu gibi, bir görünüm sorgusunu da onu çağırarak okuyun. Görünüm hazır olana kadar eşleşen öğeyi veya undefined değerini döndürür.

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

Alt Bileşeni Sorgulama

Bir alt bileşen örneğine türü belirtilmiş bir başvuru almak için bir bileşen sınıfı geçirin.

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

child = viewChild(ChildComponent);

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

Gerekli Görünüm Sorguları

Sorgulanan öğenin mutlaka var olması gerektiğinde viewChild.required() kullanın. Böylece sinyal null değer alamaz.

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

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

Birden Çok Öğeyi Sorgulama

viewChildren(), tüm eşleşmeleri içeren salt okunur bir dizi tutan bir sinyal döndürür.

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

items = viewChildren(ItemComponent);

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

Sorgular Ne Zaman Çözümlenir

Sinyal görünüm sorguları, görünüm başlatıldıktan sonra çözümlenir. Bunları bir effect içinde okumak, kullanılabilir olduklarında işlem yapmanızı sağlar.

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

viewChild ve ViewChild Dekoratörü

Sinyal tabanlı viewChild(), klasik @ViewChild dekoratörünün yerini alır; sinyallerle bütünleşir ve birçok durumda yaşam döngüsü zamanlamasını elle yönetme gereğini ortadan kaldırır.

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

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

Belirli Bir Belirteci Okuma

read seçeneği, eşleşen öğeden yönerge veya ElementRef gibi farklı bir belirteci sorgulamanızı sağlar.

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

İçeriği Yansıtmak için contentChild

Bileşenin kendi görünümü yerine yansıtılmış içerik için eşdeğer contentChild() ve contentChildren() sorgularını kullanın.

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

header = contentChild(HeaderComponent);

Doğru Sorguyu Seçme

Kendi şablonunuz için görünüm sorgularını, yansıtılmış içerik için içerik sorgularını kullanın; hedefin mutlaka var olması gerekiyorsa gerekli çeşidi, koleksiyonlar için de çoğul çeşidi seçin.

Kısa Kontrol

Sinyal görünüm sorgularını ne kadar anladığınızı test edin.

Özet

viewChild() sinyali, bir bileşen görünümündeki öğeleri ve alt bileşenleri sorgular; kesin hedefler için viewChild.required(), koleksiyonlar için viewChildren(), belirli belirteçler için read seçeneğini ve yansıtılmış içerik için contentChild() kullanın.

Sıkça Sorulan Sorular

“viewChild ile Görünüm Sorguları” dersi ücretsiz mi?

Evet — “viewChild ile Görünüm Sorguları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“viewChild ile Görünüm Sorguları” dersinde ne öğreneceğim?

Alt öğeleri sinyal olarak sorgulayın. Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“viewChild ile Görünüm Sorguları” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Angular Academy Sayfasına Dön