Mengekspos Input dan Output
Tampilkan input dan output direktif host.
Mengekspos Input dan Output 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.
Mengekspos API Komposisi
Ketika Anda mengomposisikan direktif melalui hostDirectives, masukan dan keluarannya tersembunyi secara bawaan. API komposisi memungkinkan Anda mengekspos masukan dan keluaran tertentu ke API publik host.
Bentuk Objek
Alih-alih hanya mencantumkan class, gunakan objek dengan array directive, inputs, dan outputs.
hostDirectives: [{
directive: TooltipDirective,
inputs: ['tooltipText'],
outputs: ['tooltipShown']
}]Mengekspos Masukan
Mencantumkan nama masukan di inputs membuatnya dapat diikat pada elemen host oleh konsumen.
<app-button tooltipText="Save changes"></app-button>Mengekspos Keluaran
Mencantumkan keluaran membuat host memancarkan kembali peristiwa dari direktif tersebut.
<app-button (tooltipShown)="onShown()"></app-button>Mengganti Nama Saat Mengekspos
Gunakan bentuk publicName: internalName untuk mengganti nama masukan atau keluaran saat mengeksposnya.
inputs: ['tooltipText: hint']
// consumers bind [hint]="..."Mengganti Nama Keluaran
Keluaran diganti namanya dengan cara yang sama.
outputs: ['tooltipShown: shown']
// template: (shown)="..."Mengapa Disembunyikan secara Default?
Menyembunyikan masukan/keluaran yang dikomposisikan membuat API host tetap terarah. Anda hanya mengekspos hal-hal yang masuk akal bagi konsumen, sehingga detail internal direktif tidak ikut bocor.
Menggabungkan dengan Masukan Sendiri
Host dapat memiliki masukan sendiri bersama masukan yang diekspos; Angular menggabungkannya menjadi satu API publik pada elemen tersebut.
@Component({
selector: 'app-button',
hostDirectives: [{
directive: TooltipDirective,
inputs: ['tooltipText']
}]
})
export class ButtonComponent {
label = input('');
}Benturan Nama
Jika nama masukan yang diekspos bertabrakan dengan masukan milik host, penggantian nama menghindari konflik dan memperjelas maksudnya.
Pengikatan Dua Arah
Untuk mendukung pengikatan dua arah melalui komposisi, ekspos kedua masukan dan keluaran Change yang sesuai dengan nama yang konsisten.
Praktik Terbaik
Ekspos permukaan API minimal dengan nama yang jelas dan dibutuhkan konsumen. Ganti nama internal agar sesuai dengan kosakata komponen Anda, bukan kosakata direktif yang mendasarinya.
Pemeriksaan Singkat
Uji pemahaman Anda tentang cara mengekspos masukan/keluaran.
Ringkasan
Anda telah mempelajari bahwa bentuk objek hostDirectives mengekspos inputs dan outputs yang dipilih ke API host, dengan opsi penggantian nama menggunakan publicName: internalName, sehingga permukaan publik tetap terarah.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Mengekspos Input dan Output” gratis?
Ya — teks lengkap “Mengekspos Input dan Output” 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 “Mengekspos Input dan Output”?
Tampilkan input dan output direktif host. 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 “Mengekspos Input dan Output” 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