Angular Academy · Pelajaran

Mendedahkan Input dan Output

Dedahkan input dan output arahan hos.

Pelajaran 2 daripada 413 langkah

Mendedahkan Input dan Output ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Angular Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Mendedahkan API yang Digubah

Apabila anda menggubah arahan melalui hostDirectives, input dan outputnya disembunyikan secara lalai. API gubahan membolehkan anda mendedahkan input dan output terpilih kepada API awam hos.

Bentuk Objek

Daripada hanya menyenaraikan kelas, gunakan objek dengan tatasusunan directive, inputs dan outputs.

hostDirectives: [{
  directive: TooltipDirective,
  inputs: ['tooltipText'],
  outputs: ['tooltipShown']
}]

Mendedahkan Input

Menyenaraikan nama input dalam inputs membolehkan pengguna mengikatnya pada elemen hos.

<app-button tooltipText="Save changes"></app-button>

Mendedahkan Output

Menyenaraikan output membolehkan hos memancarkan semula peristiwa direktif tersebut.

<app-button (tooltipShown)="onShown()"></app-button>

Menamakan Semula Semasa Pendedahan

Gunakan bentuk publicName: internalName untuk menamakan semula input atau output semasa anda mendedahkannya.

inputs: ['tooltipText: hint']
// consumers bind [hint]="..."

Menamakan Semula Output

Output dinamakan semula dengan cara yang sama.

outputs: ['tooltipShown: shown']
// template: (shown)="..."

Mengapa Disembunyikan Secara Lalai?

Menyembunyikan input/output yang digubah memastikan API hos direka dengan sengaja. Anda hanya mendedahkan perkara yang sesuai untuk pengguna, sekali gus mengelakkan perincian dalaman direktif terbocor.

Menggabungkan dengan Input Sendiri

Hos boleh mempunyai input sendiri bersama-sama input yang didedahkan; Angular menggabungkannya menjadi satu API awam pada elemen tersebut.

@Component({
  selector: 'app-button',
  hostDirectives: [{
    directive: TooltipDirective,
    inputs: ['tooltipText']
  }]
})
export class ButtonComponent {
  label = input('');
}

Pertembungan Nama

Jika nama input yang didedahkan bertembung dengan input hos sendiri, penamaan semula mengelakkan konflik dan menjelaskan tujuan penggunaannya.

Pengikatan Dua Hala

Untuk menyokong pengikatan dua hala melalui penggubahan, dedahkan input dan output Change yang sepadan dengan nama yang konsisten.

Amalan Terbaik

Dedahkan permukaan minimum yang dinamakan dengan baik dan diperlukan oleh pengguna. Namakan semula nama dalaman supaya sepadan dengan kosa kata komponen anda, bukannya kosa kata direktif asas.

Semakan Pantas

Uji pemahaman anda tentang pendedahan input/output.

Jawab dalam pelajaran interaktif

Imbas Kembali

Anda telah mempelajari bahawa bentuk objek hostDirectives mendedahkan inputs dan outputs terpilih kepada API hos, dengan pilihan penamaan semula publicName: internalName, sambil memastikan permukaan awam direka dengan sengaja.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 38
Pelajaran: 144

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Mendedahkan Input dan Output” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Mendedahkan Input dan Output”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Mendedahkan Input dan Output”?

Dedahkan input dan output arahan hos. Anda berlatih Angular Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Angular Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Angular Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Mendedahkan Input dan Output” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy