Angular Academy · Pelajaran

Kueri View dengan viewChild

Kueri elemen anak sebagai sinyal.

Pelajaran 4 dari 413 langkah

Kueri View dengan viewChild adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Menelusuri View

Komponen sering memerlukan referensi ke elemen atau komponen anak dalam templatnya. Angular modern menyediakan fungsi kueri berbasis sinyal viewChild().

Mendeklarasikan viewChild

Panggil viewChild() dengan nama referensi templat atau tipe komponen. Hasilnya adalah sebuah sinyal.

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

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

Membaca Kueri

Seperti semua sinyal, baca kueri view dengan memanggilnya. Kueri ini mengembalikan elemen yang cocok atau undefined hingga view siap.

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

Menelusuri Komponen Anak

Berikan class komponen untuk mendapatkan referensi bertipe ke instans komponen anak.

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

child = viewChild(ChildComponent);

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

Kueri View Wajib

Gunakan viewChild.required() ketika elemen yang dikueri harus ada. Dengan demikian, sinyal tersebut tidak dapat bernilai null.

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

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

Menelusuri Beberapa Elemen

viewChildren() mengembalikan sinyal yang berisi array hanya-baca dari semua kecocokan.

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

items = viewChildren(ItemComponent);

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

Kapan Kueri Teratasi

Kueri view berbasis sinyal teratasi setelah view diinisialisasi. Membacanya di dalam effect memastikan Anda bertindak setelah kueri tersebut tersedia.

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

viewChild vs Dekorator ViewChild

Sinyal viewChild() menggantikan dekorator klasik @ViewChild, terintegrasi dengan sinyal dan dalam banyak kasus menghindari pengaturan waktu siklus hidup secara manual.

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

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

Membaca Token Tertentu

Opsi read memungkinkan Anda mengueri token yang berbeda dari elemen yang cocok, seperti direktif atau ElementRef.

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

contentChild untuk Proyeksi

Untuk konten yang diproyeksikan, bukan view milik komponen, gunakan kueri terkait contentChild() dan contentChildren().

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

header = contentChild(HeaderComponent);

Memilih Kueri yang Tepat

Gunakan kueri view untuk templat Anda sendiri dan kueri konten untuk konten yang diproyeksikan; pilih varian wajib ketika target harus ada, dan varian jamak untuk koleksi.

Pemeriksaan Singkat

Uji pemahaman Anda tentang kueri view berbasis sinyal.

Jawab di pelajaran interaktif

Ringkasan

Sinyal viewChild() mengueri elemen dan komponen anak dalam view komponen; gunakan viewChild.required() untuk target yang dijamin ada, viewChildren() untuk koleksi, opsi read untuk token tertentu, dan contentChild() untuk konten yang diproyeksikan.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 38
Pelajaran: 144

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Kueri View dengan viewChild” gratis?

Ya — teks lengkap “Kueri View dengan viewChild” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Kueri View dengan viewChild”?

Kueri elemen anak sebagai sinyal. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Kueri View dengan viewChild” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy