Saat kita membuat aplikasi, kita kadang-kadang perlu menampilkan isi yang berbeda dalam satu komponen tanpa mengubah penampilannya. Sebagai gantinya dari membuat komponen duplikat lainnya, kita dapat menggunakan ng-content. Artikel ini akan menunjukkan bagaimana cara membuatnya.

Membuat Komponen Umum

Pertama-tama, kita harus membuat komponen yang akan menampilkan isi yang berbeda tergantung pada elemen tree DOM yang disuplai oleh parent component. Dalam kasus kita, itu adalah komponen kartu. Anda dapat membuatnya menggunakan perintah:

ng generate component card

Komponen ini akan menyimpan template untuk menampilkan header dan gambar yang disuplai oleh parent component. Isi file card.component.html seperti berikut:

<div class="card">
 <h3 class="card-header">
 <ng-content select="[header]"></ng-content>
 </h3>
 <div class="card-image">
 <ng-content select="[image]"></ng-content>
 </div>
</div>

Itu menggunakan dua elemen ng-content untuk melakukan proyeksi elemen yang disuplai oleh parent component. Mereka memiliki direktif "select" yang digunakan untuk memilih isi yang disuplai oleh parent, berdasarkan nama direktif, untuk ditampilkan di lokasi tertentu.

Menambahkan Isi

Sekarang, mari lihat pada komponen induk app.component.html:

<div class="container">
 <app-card>
 <h1 header>Shoes</h1>
 <img image src="./../assets/shoes.jpg">
 </app-card>
 <app-card>
 <h1 header>T-shirts</h1>
 <img image src "./../assets/t-shirt.jpg">
 </app-card>
 <app-card>
 <h1 header>Trousers</h1>
 <img image src="./../assets/trousers.jpg">
 </app-card>
</div>

Komponen ini berisi 3 instansi komponen kartu. Dalamnya terdapat dua elemen DOM: elemen h1 header dan elemen img. Elemen pertama memiliki direktif "header". Berdasarkan direktif tersebut, komponen kartu mengecek apakah nilai yang diassign ke direktif "select" sama dengan nama direktif yang diterapkan. Jika ya, maka ng-content akan menampilkan isi yang diproyeksikan dengan nama direktif yang sama. Elemen kedua memiliki direktif "image". Mekanisme matching bekerja secara serupa pada elemen sebelumnya. Ketika nilai direktif "select" dalam komponen kartu sama dengan nama direktif dalam elemen img, maka ng-content akan menampilkan isi yang diproyeksikan oleh komponen induk. Untuk aplikasi berfungsi dengan baik, Anda harus pastikan bahwa ada beberapa gambar contoh di folder "assets". Hasil proyeksi dapat dilihat sebagai berikut:

Tampilan Akhir

Kesimpulan

Seperti yang Anda lihat, Content Projection adalah mekanisme yang sangat bagus karena kita dapat mengurangi jumlah kode dan membuat komponen yang dapat digunakan kembali dengan cara yang sederhana. Jika Anda memiliki pertanyaan tentang hal ini, silakan tidak ragu-ragu untuk meninggalkan komentarnya di bawah artikel ini.