Membangun Perilaku yang Dapat Digunakan Ulang
Kemas perilaku sebagai direktif yang dapat dikomposisikan.
Membangun Perilaku yang Dapat Digunakan Ulang adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.
Perilaku sebagai Komponen Penyusun
API komposisi sangat berguna saat Anda merancang direktif kecil dan terfokus, yang masing-masing merangkum satu perilaku, lalu mengomposisikannya ke komponen sesuai kebutuhan.
Direktif dengan Satu Tujuan
Jaga setiap perilaku tetap kecil dan mandiri.
@Directive({
selector: '[appElevate]'
})
export class ElevateDirective {
@HostBinding('style.boxShadow')
shadow = '0 2px 8px rgba(0,0,0,.15)';
}Perilaku Arahkan Kursor
Perilaku lainnya mendengarkan saat kursor diarahkan dan mengaktifkan atau menonaktifkan sebuah kelas.
@Directive({ selector: '[appHoverClass]' })
export class HoverClassDirective {
@HostBinding('class.is-hover') hovering = false;
@HostListener('mouseenter') on() { this.hovering = true; }
@HostListener('mouseleave') off() { this.hovering = false; }
}Mengomposisikan Perilaku
Komponen kartu mengomposisikan kedua perilaku tanpa perlu pengaitan pada templat.
@Component({
selector: 'app-card',
hostDirectives: [ElevateDirective, HoverClassDirective],
template: '<ng-content></ng-content>'
})
export class CardComponent {}Penggunaan Ulang di Berbagai Komponen
Perilaku yang sama dapat dikomposisikan ke tombol, ubin, atau panel. Definisikan sekali dan gunakan ulang di mana saja tanpa duplikasi.
Perilaku yang Dapat Dikonfigurasi
Tambahkan masukan agar perilaku dapat disesuaikan, lalu ekspos masukan tersebut di tempat perilaku dikomposisikan.
@Directive({ selector: '[appElevate]' })
export class ElevateDirective {
level = input(1);
}Mengekspos Pengatur
Ekspos masukan yang dapat dikonfigurasi agar setiap host dapat menetapkan nilainya.
hostDirectives: [{
directive: ElevateDirective,
inputs: ['level']
}]Mengoordinasikan Perilaku
Perilaku dapat menyuntikkan satu sama lain melalui penyuntik elemen untuk berkoordinasi, misalnya riak yang merespons status ditekan.
Kemudahan Pengujian
Perilaku kecil mudah diuji sebagai unit secara terpisah, lalu dapat dipercaya saat dikomposisikan sehingga keandalan keseluruhan meningkat.
Konvensi Penamaan
Beri nama perilaku berdasarkan fungsinya (appElevate, appHoverClass, appAutofocus). Nama yang jelas membuat komposisi dapat dipahami tanpa dokumentasi tambahan.
Pustaka Perilaku
Seiring waktu, Anda dapat membangun pustaka perilaku yang dapat dikomposisikan dan dipilih oleh komponen mana pun, sehingga logika host yang berulang berkurang secara drastis.
Pemeriksaan Singkat
Uji pemahaman Anda tentang perilaku yang dapat digunakan ulang.
Ringkasan
Anda telah mempelajari cara merancang direktif kecil dan mandiri yang masing-masing merangkum satu perilaku, mengomposisikannya dengan hostDirectives, mengekspos masukan yang dapat disesuaikan, serta membangun pustaka perilaku yang dapat digunakan ulang dan diuji.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Membangun Perilaku yang Dapat Digunakan Ulang” gratis?
Ya — teks lengkap “Membangun Perilaku yang Dapat Digunakan Ulang” 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 “Membangun Perilaku yang Dapat Digunakan Ulang”?
Kemas perilaku sebagai direktif yang dapat dikomposisikan. 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 3 dari 4.
Berapa lama pelajaran “Membangun Perilaku yang Dapat Digunakan Ulang” 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