Input Sinyal dengan input()
Deklarasikan input reaktif sebagai sinyal.
Input Sinyal dengan input() 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.
Input Berbasis Sinyal
Angular modern menyediakan fungsi input() untuk mendeklarasikan input komponen sebagai sinyal, menggantikan dekorator @Input klasik dengan alternatif reaktif.
Mendeklarasikan Input Sinyal
Panggil input() dengan nilai default opsional. Hasilnya adalah sinyal hanya-baca.
import { Component, input } from "@angular/core";
@Component({ selector: "app-greet", template: "" })
export class GreetComponent {
name = input("World");
}Membaca Input
Input sinyal dibaca dengan memanggilnya seperti fungsi, baik dalam kode maupun templat.
@Component({
selector: "app-greet",
template: "<p>Hello, {{ name() }}</p>"
})
export class GreetComponent {
name = input("World");
}Mengikat dari Induk
Induk mengikat input sinyal sama seperti input klasik, menggunakan pengikatan properti.
<app-greet [name]="userName"></app-greet>
// parent
userName = "Ada";Input Bersifat Hanya-Baca
input() biasa bersifat hanya-baca di dalam komponen. Anda tidak dapat memanggil set padanya; hanya induk yang dapat mengubah nilainya.
// this is NOT allowed:
// this.name.set("x");
// inputs are read-only signalsMenentukan Tipe Input
Berikan tipe generik untuk keamanan tipe, terutama ketika tidak ada nilai default yang dapat digunakan sebagai acuan.
age = input<number>();
label = input<string>("Untitled");Input dalam Nilai Terhitung
Karena input adalah sinyal, input dapat terintegrasi dengan computed untuk menghasilkan status turunan yang diperbarui secara otomatis.
import { input, computed } from "@angular/core";
first = input("");
last = input("");
fullName = computed(() => this.first() + " " + this.last());Input dengan effect
Anda dapat merespons perubahan input dengan effect, yang dijalankan ulang setiap kali sinyal yang dibaca berubah.
constructor() {
effect(() => {
console.log("name is", this.name());
});
}Tidak Perlu ngOnChanges
Dengan input sinyal, Anda sering kali tidak lagi memerlukan ngOnChanges; computed dan effect akan merespons perubahan untuk Anda.
Memberi Alias pada Input
Anda dapat mengekspos nama pengikatan publik yang berbeda dengan opsi alias.
value = input(0, { alias: "count" });
<!-- parent binds with the alias -->
<app-counter [count]="total"></app-counter>Mengapa Menggunakan Input Sinyal
Input sinyal bersifat reaktif, aman secara tipe, dan dapat digabungkan dengan baik bersama computed dan effect, sehingga mengurangi kode pendukung dibandingkan pendekatan dekorator dan siklus hidup.
Pemeriksaan Singkat
Uji pemahaman Anda tentang input sinyal.
Rangkuman
Fungsi input() mendeklarasikan input sinyal yang reaktif dan hanya-baca. Baca input tersebut dengan memanggilnya, tentukan tipenya menggunakan generik, beri alias jika diperlukan, lalu gabungkan dengan computed dan effect sebagai pengganti ngOnChanges.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Input Sinyal dengan input()” gratis?
Ya — teks lengkap “Input Sinyal dengan input()” 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 “Input Sinyal dengan input()”?
Deklarasikan input reaktif sebagai sinyal. 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 “Input Sinyal dengan input()” 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
- Input Sinyal dengan input()
- Input Wajib dan yang Ditansformasi
- Output dengan output()
- Kueri View dengan viewChild