Angular Academy · Pelajaran

Output dengan output()

Pancarkan peristiwa dengan API output baru.

Output dengan output() 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.

Output Era Sinyal

Selain input sinyal, Angular modern menyediakan fungsi output() untuk mendeklarasikan peristiwa komponen, menggantikan @Output klasik dengan EventEmitter.

Mendeklarasikan Output

Panggil output() untuk membuat peristiwa yang dapat dipancarkan oleh komponen. Berikan tipe generik untuk muatan peristiwa.

import { Component, output } from "@angular/core";

@Component({ selector: "app-counter", template: "" })
export class CounterComponent {
  changed = output<number>();
}

Memancarkan Peristiwa

Panggil emit pada output untuk mengirimkan nilai kepada pendengar.

export class CounterComponent {
  changed = output<number>();
  count = 0;
  inc() {
    this.count++;
    this.changed.emit(this.count);
  }
}

Mendengarkan dari Induk

Induk berlangganan menggunakan pengikatan peristiwa, dengan $event untuk muatan yang dipancarkan.

<app-counter (changed)="onChange($event)"></app-counter>

// parent
onChange(value: number) {
  this.total = value;
}

Output Tanpa Muatan

Untuk peristiwa yang tidak membawa data, gunakan output<void>() dan pancarkan tanpa argumen.

closed = output<void>();

close() {
  this.closed.emit();
}

output vs EventEmitter

API output() lebih sederhana dan tidak bergantung pada RxJS. Anda tidak perlu membuat instans EventEmitter; fungsi tersebut membuatnya untuk Anda.

// classic:
@Output() changed = new EventEmitter<number>();

// modern:
changed = output<number>();

Memberi Alias pada Output

Gunakan opsi alias untuk mengekspos nama peristiwa publik yang berbeda.

valueChange = output<number>({ alias: "change" });

<!-- parent listens with the alias -->
<app-counter (change)="onChange($event)"></app-counter>

Output dan Pengikatan Dua Arah

Memasangkan input dengan output bernama xChange memungkinkan pengikatan dua arah, meskipun model() melakukannya dengan lebih ringkas.

value = input(0);
valueChange = output<number>();
// enables [(value)] on the parent

Mendapatkan Output dari Observable

Pembantu interoperabilitas outputFromObservable mengubah Observable menjadi output, sehingga menjembatani aliran RxJS dengan API baru.

import { outputFromObservable } from "@angular/core/rxjs-interop";

clicks = outputFromObservable(this.clicks$);

Keamanan Tipe

Karena output memiliki tipe, parameter pengendali di induk diperiksa terhadap tipe muatan yang dipancarkan, sehingga ketidakcocokan dapat ditemukan saat kompilasi.

selected = output<{ id: number }>();

<!-- parent must accept { id: number } -->
<app-list (selected)="pick($event)"></app-list>

Kapan Menggunakan output

Utamakan output() untuk komponen baru: lebih ringan, aman secara tipe, dan berpadu secara alami dengan input sinyal untuk memodelkan komunikasi komponen.

Pemeriksaan Singkat

Uji pemahaman Anda tentang fungsi output.

Rangkuman

Fungsi output() mendeklarasikan peristiwa bertipe tanpa EventEmitter. Pancarkan dengan emit(), dengarkan melalui pengikatan peristiwa dan $event, beri alias jika diperlukan, lalu pasangkan dengan input sinyal untuk komunikasi komponen yang bersih.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Output dengan output()” gratis?

Ya — teks lengkap “Output dengan 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 “Output dengan output()”?

Pancarkan peristiwa dengan API output baru. 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 “Output dengan 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

← Kembali ke Angular Academy