TemplateRef dan ViewContainerRef
Render templat secara dinamis.
TemplateRef dan ViewContainerRef 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.
Rendering Imperatif
Terkadang Anda harus merender konten secara terprogram, bukan secara deklaratif. Angular menyediakan TemplateRef dan ViewContainerRef untuk kendali tingkat rendah ini.
TemplateRef
TemplateRef adalah referensi ke sebuah <ng-template>. Referensi ini mewakili markup yang dapat dibuat instansinya nanti.
tpl = viewChild.required<TemplateRef<unknown>>('tpl');ViewContainerRef
ViewContainerRef adalah lokasi di DOM tempat Anda dapat memasang tampilan. Injeksikan referensi ini untuk mengendalikan apa yang dirender di sana.
private vcr = inject(ViewContainerRef);createEmbeddedView
Gabungkan keduanya: createEmbeddedView membuat instans TemplateRef ke dalam ViewContainerRef.
this.vcr.createEmbeddedView(this.tpl());Meneruskan Konteks
Anda dapat meneruskan objek konteks sebagai argumen kedua, yang dapat diakses melalui variabel let-.
this.vcr.createEmbeddedView(this.tpl(), {
$implicit: 'Hello',
count: 3
});Menghapus Tampilan
ViewContainerRef.clear() menghapus semua tampilan yang dibuatnya. Inilah cara untuk mengaktifkan dan menonaktifkan konten dinamis.
this.vcr.clear();Direktif Struktural Khusus
Pola ini menjadi dasar bagi direktif struktural khusus. Direktif tersebut menginjeksikan kedua referensi dan merendernya secara bersyarat.
@Directive({ selector: '[appUnless]' })
export class UnlessDirective {
private tpl = inject(TemplateRef<unknown>);
private vcr = inject(ViewContainerRef);
}Bereaksi terhadap Input
Setter pada input direktif mengendalikan create/clear agar tampilan muncul atau menghilang.
@Input() set appUnless(condition: boolean) {
if (!condition) {
this.vcr.createEmbeddedView(this.tpl);
} else {
this.vcr.clear();
}
}Menyisipkan pada Indeks
createEmbeddedView menerima indeks untuk mengendalikan urutan penyisipan di antara tampilan bersaudara.
this.vcr.createEmbeddedView(this.tpl(), {}, 0);createComponent
ViewContainerRef juga dapat membuat instans komponen secara dinamis dengan createComponent, pengganti modern untuk ComponentFactoryResolver.
const ref = this.vcr.createComponent(WidgetComponent);
ref.setInput('title', 'Hi');Membersihkan
Tampilan yang dibuat secara imperatif harus dibersihkan. Menghancurkan komponen host akan menghapus ViewContainerRef-nya secara otomatis, tetapi panggil clear() saat melakukan pengaktifan atau penonaktifan secara manual.
Pemeriksaan Singkat
Uji pemahaman Anda tentang rendering imperatif.
Rangkuman
Anda telah mempelajari bahwa TemplateRef adalah referensi ke markup templat, ViewContainerRef adalah titik penyisipan DOM, dan createEmbeddedView merender yang pertama ke dalam yang kedua. Bersama-sama, keduanya mendukung direktif struktural khusus dan komponen dinamis.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “TemplateRef dan ViewContainerRef” gratis?
Ya — teks lengkap “TemplateRef dan ViewContainerRef” 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 “TemplateRef dan ViewContainerRef”?
Render templat secara dinamis. 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 “TemplateRef dan ViewContainerRef” 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
- Proyeksi Konten Satu Slot
- Proyeksi Banyak Slot dengan select
- ng-template dan ng-container
- TemplateRef dan ViewContainerRef