Angular Academy · Pelajaran

Hook AfterView dan AfterContent

Jalankan logika setelah inisialisasi view dan content.

Hook AfterView dan AfterContent 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.

Tampilan vs Konten

Angular membedakan tampilan komponen (templatnya sendiri) dari konten yang diproyeksikan ke dalamnya melalui ng-content. Hook yang berbeda dijalankan untuk masing-masing.

AfterViewInit

Hook AfterViewInit dijalankan sekali setelah tampilan komponen dan tampilan anaknya selesai diinisialisasi. Inilah waktu yang tepat untuk mengakses anak tampilan.

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

export class DemoComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    console.log("view ready");
  }
}

Mengakses ViewChild

Referensi @ViewChild ke elemen templat tersedia secara andal di ngAfterViewInit, bukan sebelumnya.

@ViewChild("input") input!: ElementRef;

ngAfterViewInit() {
  this.input.nativeElement.focus();
}

AfterViewChecked

Hook AfterViewChecked dijalankan setelah setiap pemeriksaan tampilan komponen. Hook ini sering dijalankan, jadi minimalkan pekerjaan di dalamnya.

ngAfterViewChecked() {
  // runs after each view check
}

AfterContentInit

Hook AfterContentInit dijalankan sekali setelah konten yang diproyeksikan dengan ng-content selesai diinisialisasi.

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

export class CardComponent implements AfterContentInit {
  ngAfterContentInit() {
    console.log("projected content ready");
  }
}

Mengakses ContentChild

Gunakan @ContentChild untuk mencari konten yang diproyeksikan. Referensinya tersedia di ngAfterContentInit.

@ContentChild(HeaderComponent) header!: HeaderComponent;

ngAfterContentInit() {
  console.log(this.header);
}

AfterContentChecked

Hook AfterContentChecked dijalankan setelah setiap pemeriksaan konten yang diproyeksikan. Seperti hook pemeriksaan tampilan, hook ini sering dijalankan.

Urutan Hook Lengkap

Untuk komponen dengan input dan konten, urutannya adalah: ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked.

// init sequence:
// OnChanges -> OnInit -> DoCheck
// -> AfterContentInit -> AfterContentChecked
// -> AfterViewInit -> AfterViewChecked

Error ExpressionChangedAfterChecked

Mengubah data yang terikat di dalam ngAfterViewInit dapat memicu ExpressionChangedAfterItHasBeenCheckedError yang terkenal. Tunda pembaruan tersebut untuk menghindarinya.

ngAfterViewInit() {
  // defer to next tick to avoid the error
  setTimeout(() => this.ready = true);
}

Menggunakan ViewChildren

@ViewChildren mengembalikan QueryList yang berisi beberapa elemen atau komponen yang cocok, dan siap digunakan di ngAfterViewInit.

@ViewChildren(ItemComponent) items!: QueryList<ItemComponent>;

ngAfterViewInit() {
  console.log(this.items.length);
}

Memilih Hook yang Tepat

Gunakan hook AfterView untuk templat Anda sendiri dan hook AfterContent untuk konten yang diproyeksikan. Utamakan varian Init untuk penyiapan satu kali, dan gunakan varian Checked hanya jika diperlukan.

Pemeriksaan Singkat

Uji pemahaman Anda tentang hook setelah tampilan dan setelah konten.

Ringkasan

Hook AfterContent dijalankan untuk konten yang diproyeksikan, sedangkan hook AfterView dijalankan untuk tampilan milik komponen. Varian Init dijalankan sekali; varian Checked dijalankan pada setiap siklus. Gunakan hook tersebut untuk mengakses @ViewChild dan @ContentChild dengan aman.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Hook AfterView dan AfterContent” gratis?

Ya — teks lengkap “Hook AfterView dan AfterContent” 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 “Hook AfterView dan AfterContent”?

Jalankan logika setelah inisialisasi view dan content. 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 “Hook AfterView dan AfterContent” 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