Properti hostDirectives
Lampirkan direktif ke host komponen.
Properti hostDirectives 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.
API Komposisi Direktif
API Komposisi Direktif memungkinkan komponen atau direktif menerapkan direktif lain secara deklaratif ke elemen host-nya sendiri melalui properti hostDirectives. Dengan demikian, Anda dapat menggunakan kembali perilaku tanpa pewarisan.
Masalah yang Diselesaikannya
Sebelumnya, untuk menggunakan kembali perilaku direktif, Anda harus mengulangi direktif tersebut di setiap templat atau menggunakan pewarisan. hostDirectives mengomposisikan perilaku langsung ke elemen host.
Sintaks Dasar
Daftarkan direktif dalam array hostDirectives pada metadata komponen.
@Component({
selector: 'app-menu',
hostDirectives: [CdkTrapFocus],
template: '<ng-content></ng-content>'
})
export class MenuComponent {}Yang Terjadi
Angular secara otomatis menerapkan CdkTrapFocus ke setiap elemen host app-menu. Pengguna langsung mendapatkan perilaku tersebut tanpa perlu menambahkan direktifnya sendiri.
Persyaratan
Direktif host harus mandiri. Anda merujuk langsung ke class direktif, bukan ke pemilihnya.
Beberapa Direktif Host
Komposisikan beberapa perilaku dengan mencantumkan semuanya.
hostDirectives: [
HighlightDirective,
TooltipDirective,
CdkTrapFocus
]Menerapkannya pada Direktif
Sebuah direktif juga dapat memiliki direktif host, sehingga Anda dapat membangun perilaku berlapis yang dapat dikomposisikan.
@Directive({
selector: '[appCard]',
hostDirectives: [HoverElevateDirective]
})
export class CardDirective {}Urutan Siklus Hidup
Direktif host dibuat sebelum logika konstruktor milik host, sehingga penyiapannya tersedia ketika host diinisialisasi.
Injeksi Dependensi
Direktif host dapat disuntikkan ke dalam host, dan sebaliknya, melalui penyuntik elemen. Hal ini memungkinkan koordinasi antarperilaku yang dikomposisikan.
private trap = inject(CdkTrapFocus);Tanpa Perubahan Templat
Keuntungan utamanya: pengguna app-menu tidak perlu mengetahui CdkTrapFocus. Perilaku tersebut dienkapsulasi dalam definisi komponen.
Kapan Menggunakannya
Gunakan hostDirectives untuk menggabungkan perilaku lintas komponen seperti perangkap fokus, riak, dan analitik ke dalam komponen atau direktif secara rapi dan dapat digunakan kembali.
Pemeriksaan Singkat
Uji pemahaman Anda tentang hostDirectives.
Ringkasan
Anda telah mempelajari bahwa properti hostDirectives secara otomatis menerapkan direktif mandiri ke elemen host komponen atau direktif, sehingga perilaku dapat digunakan kembali melalui komposisi tanpa templat atau pewarisan.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Properti hostDirectives” gratis?
Ya — teks lengkap “Properti hostDirectives” 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 “Properti hostDirectives”?
Lampirkan direktif ke host komponen. 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 “Properti hostDirectives” 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
- Properti hostDirectives
- Mengekspos Input dan Output
- Membangun Perilaku yang Dapat Digunakan Ulang
- Komposisi vs Pewarisan