Angular Academy · Pelajaran

Proyeksi Konten Satu Slot

Proyeksikan konten dengan ng-content.

Proyeksi Konten Satu Slot adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.

Apa Itu Proyeksi Konten

Proyeksi konten memungkinkan komponen menerima markup dari induknya dan merendernya di dalam templatnya sendiri. Ini adalah padanan Angular untuk "slot" pada komponen web.

Induk menulis konten di antara tag komponen, lalu komponen menentukan di mana konten tersebut ditampilkan.

Mengapa Anda Membutuhkannya

Pembungkus yang dapat digunakan kembali seperti kartu, dialog, dan panel tidak mengetahui kontennya sejak awal. Proyeksi konten menjadikannya wadah yang fleksibel.

Buat kartu sekali, lalu isi dengan apa saja
Pertahankan logika tata letak di dalam komponen
Pertahankan konten di dalam konsumen

Elemen ng-content

Elemen <ng-content> menandai tempat penempatan konten yang diproyeksikan. Penyiapan satu slot menggunakan tepat satu <ng-content> tanpa atribut select.

@Component({
  selector: 'app-card',
  template: '<div class="card"><ng-content></ng-content></div>'
})
export class CardComponent {}

Menggunakan Komponen

Apa pun yang ditempatkan induk di antara tag komponen akan diproyeksikan ke dalam slot.

<app-card>
  <h2>Hello</h2>
  <p>This text is projected into the card.</p>
</app-card>

Satu Slot = Satu Saluran

Dengan satu slot tanpa nama, semua node yang diproyeksikan masuk ke satu <ng-content>. Tidak ada penyaringan; urutannya dipertahankan persis seperti yang ditulis induk.

Konten Bawaan

Anda dapat menempatkan markup pengganti di dalam <ng-content>. Angular modern hanya merender konten bawaan ini ketika konsumen tidak memproyeksikan apa pun ke slot tersebut.

<div class="card">
  <ng-content>No content provided.</ng-content>
</div>

Memberi Gaya pada Konten yang Diproyeksikan

Konten yang diproyeksikan merupakan bagian dari tampilan induk, sehingga diberi gaya oleh gaya induk, bukan gaya kartu. Untuk mengakses node yang diproyeksikan dari kartu, gunakan ::ng-deep secukupnya atau andalkan gaya global.

Konten vs Tampilan

Angular membedakan anak konten (diproyeksikan ke dalam) dari anak tampilan (dideklarasikan di dalam templat). Hal ini penting untuk kueri seperti contentChild dan viewChild.

icon = contentChild(IconComponent);

Siklus Hidup: ngAfterContentInit

Konten yang diproyeksikan tersedia setelah ngAfterContentInit() dijalankan. Gunakan metode tersebut (atau ngAfterContentChecked) untuk membaca anak konten dengan aman.

ngAfterContentInit() {
  console.log('Projected content ready');
}

Contoh Panel Nyata

Berikut panel lengkap yang dapat digunakan kembali. Konsumen sepenuhnya mengendalikan bagian dalamnya; panel mengendalikan kerangkanya.

@Component({
  selector: 'app-panel',
  template: '<section class="panel"><ng-content></ng-content></section>',
  styles: ['.panel { border: 1px solid #ccc; padding: 16px; }']
})
export class PanelComponent {}

Kesalahan Umum

Menempatkan <ng-content> tanpa nama yang sama sebanyak dua kali tidak menggandakan konten. Angular hanya memproyeksikan konten ke slot terakhir yang cocok. Gunakan proyeksi multi-slot jika Anda memerlukan beberapa wilayah.

Pemeriksaan Singkat

Uji pemahaman Anda tentang proyeksi satu slot.

Rangkuman

Anda telah mempelajari bahwa proyeksi konten menggunakan <ng-content> untuk merender markup yang disediakan induk di dalam komponen. Proyeksi satu slot menggunakan satu saluran tanpa nama, konten yang diproyeksikan merupakan bagian dari tampilan induk, dan konten tersebut tersedia di ngAfterContentInit.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Proyeksi Konten Satu Slot” gratis?

Ya — teks lengkap “Proyeksi Konten Satu Slot” 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 “Proyeksi Konten Satu Slot”?

Proyeksikan konten dengan ng-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 1 dari 4.

Berapa lama pelajaran “Proyeksi Konten Satu Slot” 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