Angular Academy · Pelajaran

Proyeksi Banyak Slot dengan select

Proyeksikan konten ke dalam slot bernama.

Proyeksi Banyak Slot dengan select adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Beberapa Slot

Banyak komponen memerlukan beberapa wilayah: header, isi, dan footer. Angular mendukungnya melalui proyeksi multi-slot menggunakan atribut select pada <ng-content>.

Atribut select

select menerima pemilih CSS. Setiap <ng-content select="..."> hanya memproyeksikan node yang cocok dengan pemilih tersebut.

<ng-content select="[card-header]"></ng-content>
<ng-content select="[card-body]"></ng-content>

Memilih Berdasarkan Atribut

Pemilih atribut adalah pola yang paling umum karena mudah dibaca dalam markup konsumen.

@Component({
  selector: 'app-card',
  template:
    '<header><ng-content select="[header]"></ng-content></header>' +
    '<main><ng-content select="[body]"></ng-content></main>'
})
export class CardComponent {}

Menggunakan Slot Bernama

Konsumen menandai setiap bagian konten dengan atribut yang sesuai.

<app-card>
  <h2 header>Title</h2>
  <p body>Some body text here.</p>
</app-card>

Memilih Berdasarkan Elemen atau Kelas

Anda juga dapat memilih berdasarkan nama elemen atau kelas CSS.

<ng-content select="card-title"></ng-content>
<ng-content select=".highlight"></ng-content>

Slot Penangkap Semua

<ng-content> tanpa atribut select akan menangkap semua hal yang tidak cocok dengan slot bernama. Tempatkan slot ini terakhir sebagai pengganti.

<ng-content select="[header]"></ng-content>
<ng-content></ng-content>

Urutan Itu Penting

Angular mengevaluasi slot sesuai urutan dalam templat. Setiap node yang diproyeksikan masuk ke slot pertama yang cocok. Letakkan slot penangkap semua setelah pemilih khusus agar slot tersebut tidak menelan semuanya.

Menggabungkan Pemilih

Pemilih CSS dapat digabungkan, misalnya select="button[primary]" menargetkan elemen tombol dengan atribut primary.

<ng-content select="button[primary]"></ng-content>

Komponen Tata Letak

Berikut kartu dengan slot header, isi, dan footer, serta slot penangkap semua.

@Component({
  selector: 'app-card',
  template:
    '<header><ng-content select="[header]"></ng-content></header>' +
    '<section><ng-content></ng-content></section>' +
    '<footer><ng-content select="[footer]"></ng-content></footer>'
})
export class CardComponent {}

Setiap Node Diproyeksikan Sekali

Node yang diproyeksikan hanya cocok dengan satu slot dan dirender tepat satu kali. Tidak ada cara untuk menggandakan node yang sama ke dalam dua slot melalui proyeksi.

Memberi Gaya per Slot

Karena setiap slot berada di lokasi DOM yang berbeda, Anda dapat membungkus slot dalam wadah bergaya (header/footer) agar setiap wilayah memiliki tampilan tersendiri.

Pemeriksaan Singkat

Uji pengetahuan Anda tentang proyeksi multi-slot.

Rangkuman

Anda telah mempelajari cara membuat komponen multi-slot dengan <ng-content select="...">. Pemilih dapat menargetkan atribut, elemen, atau kelas; slot tanpa pemilih berfungsi sebagai penangkap semua; dan urutan menentukan slot yang dipilih.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Proyeksi Banyak Slot dengan select” gratis?

Ya — teks lengkap “Proyeksi Banyak Slot dengan select” 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 Banyak Slot dengan select”?

Proyeksikan konten ke dalam slot bernama. 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 2 dari 4.

Berapa lama pelajaran “Proyeksi Banyak Slot dengan select” 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