Cara Menggunakan Output Decorator di Angular

Di Angular, halaman web dapat berisi banyak komponen berbeda yang dapat digunakan kembali. Setiap komponen biasanya berisi logika TypeScript, template HTML, dan gaya CSS sendiri.

Anda juga dapat menggunakan kembali komponen di dalam komponen lain. Dalam hal ini, Anda dapat menggunakan dekorator Output untuk mengirimkan informasi dari komponen anak kembali ke komponen induknya.

Anda juga dapat menggunakan dekorator Output untuk mendengarkan peristiwa yang terjadi di komponen anak.

Cara Menambahkan Dekorator Keluaran ke Komponen Anak

Pertama, Anda perlu membuat aplikasi Angular baru dengan komponen induk dan komponen anak.

Setelah Anda memiliki komponen induk dan anak, Anda dapat menggunakan dekorator Output untuk mentransfer data dan mendengarkan kejadian di antara kedua komponen tersebut.

1. Buat yang baru Aplikasi sudut. Secara default, "app" adalah nama komponen root. Komponen ini mencakup tiga file utama: "app.component.html", "app.component.css", dan "app.component.ts".
2. Untuk contoh ini, komponen "app" akan bertindak sebagai komponen induk. Ganti semua konten di "app.component.html" dengan yang berikut:

   <divkelas="komponen induk">
   <h1> Ini adalah komponen induk h1>
   div>

3. Tambahkan beberapa gaya ke komponen aplikasi induk di "app.component.css":

   .komponen-induk {
   font-family: Arial, Helvetica, Sans Serif;
   warna latar belakang: lightcoral;
   lapisan: 20px
   }

4. Gunakan perintah "ng generate component" untuk buat komponen Angular baru disebut "data-komponen". Dalam contoh ini, "data-component" akan mewakili komponen anak.

   ng g c komponen data

5. Tambahkan konten ke komponen anak di "data-component.component.html". Ganti konten saat ini untuk menambahkan tombol baru. Ikat tombol ke fungsi yang akan dijalankan saat pengguna mengkliknya:

   <divkelas="komponen anak">
   <P> Ini adalah komponen anak P>
   <tombol (klik)="onButtonClick()">Klik sayatombol>
   div>

6. Tambahkan beberapa gaya ke komponen anak di "data-component.component.css":

   .anak-komponen {
   font-family: Arial, Helvetica, Sans Serif;
   warna latar belakang: biru muda;
   batas: 20px;
   lapisan: 20px
   }

7. Tambahkan fungsi onButtonClick() ke file TypeScript untuk komponen, di "data-component.component.ts":

   onButtonClick() {
   }

8. Masih di dalam file TypeScript, tambahkan "Output" dan "EventEmitter" ke daftar impor:

   impor { Komponen, Output, EventEmitter, OnInit } dari'@sudut/inti';

9. Di dalam kelas DataComponentComponent, nyatakan variabel Output untuk komponen yang disebut "buttonWasClicked". Ini akan menjadi EventEmitter. EventEmitter adalah kelas bawaan yang memungkinkan Anda memberi tahu komponen lain saat suatu peristiwa terjadi.

   eksporkelas DataComponentComponent alat OnInit {
   @Keluaran() buttonWasClicked = baru Pemancar Peristiwa<ruang kosong>();
   // ...
   }

10. Gunakan penghasil peristiwa "buttonWasClicked" di dalam fungsi onButtonClick(). Saat pengguna mengklik tombol, komponen data akan mengirimkan kejadian ini ke komponen aplikasi induk.

    onButtonClick() {
    ini.buttonWasClicked.emit();
    }

Cara Mendengarkan Acara di Komponen Anak Dari Komponen Induk

Untuk menggunakan properti Output komponen anak, Anda perlu mendengarkan peristiwa yang dipancarkan dari komponen induk.

1. Gunakan komponen anak di dalam "app.component.html". Anda dapat menambahkan keluaran "buttonWasClicked" sebagai properti saat membuat tag HTML. Ikat acara ke fungsi baru.

   <aplikasi-data-komponen (buttonWasClicked)="buttonInChildComponentWasClicked()">aplikasi-data-komponen>

2. Di dalam "app.component.ts", tambahkan fungsi baru untuk menangani peristiwa klik tombol saat terjadi di komponen anak. Buat pesan saat pengguna mengklik tombol.

   pesan: rangkaian = ""
   buttonInChildComponentWasClicked() {
   ini.pesan = 'Tombol di komponen anak telah diklik';
   }

3. Tampilkan pesan di "app.component.html":

   <P>{{pesan}}P>

4. Ketik perintah "ng serve" ke terminal untuk menjalankan aplikasi Angular Anda. Buka di browser web di localhost: 4200. Komponen induk dan anak menggunakan warna latar belakang yang berbeda agar lebih mudah membedakannya.
5. Klik pada Klik saya tombol. Komponen anak akan mengirimkan acara ke komponen induk, yang akan menampilkan pesan.

Cara Mengirim Data Dari Komponen Anak ke Komponen Induk

Anda juga dapat mengirimkan data dari komponen anak ke komponen induk.

1. Di "data-component.component.ts", tambahkan variabel untuk menyimpan daftar string yang berisi beberapa data.

   daftarOrang: rangkaian[] = ['Joey', 'Yohanes', 'James'];

2. Ubah jenis kembalian emitor peristiwa buttonWasClicked. Ubah dari void menjadi string[], agar sesuai dengan daftar string yang Anda nyatakan di langkah sebelumnya:

   @Keluaran() buttonWasClicked = baru Pemancar Peristiwa<rangkaian[]>();

3. Ubah fungsi onButtonClick(). Saat mengirim event ke komponen induk, tambahkan data sebagai argumen ke dalam fungsi emit():

   onButtonClick() {
   ini.buttonWasClicked.emit(ini.listOfPeople);
   }

4. Di "app.component.html", ubah tag "app-data-component". Tambahkan "$event" ke dalam fungsi buttonInChildComponentWasClicked(). Ini berisi data yang dikirim dari komponen anak.

   <aplikasi-data-komponen (buttonWasClicked)="buttonInChildComponentWasClicked($event)">aplikasi-data-komponen>

5. Perbarui fungsi di "app.component.ts" untuk menambahkan parameter data:

   buttonInChildComponentWasClicked (dataFromChild: rangkaian[]) {
   ini.pesan = 'Tombol di komponen anak telah diklik';
   }

6. Tambahkan variabel baru bernama "data" untuk menyimpan data yang berasal dari komponen anak:

   pesan: rangkaian = ""
   data: rangkaian[] = []
   buttonInChildComponentWasClicked (dataFromChild: rangkaian[]) {
   ini.pesan = 'Tombol di komponen anak telah diklik';
   ini.data = dataDariAnak;
   }

7. Menampilkan data pada halaman HTML:

   <P>{{data.join(', ')}}P>

8. Ketik perintah "ng serve" ke terminal untuk menjalankan aplikasi Angular Anda. Buka di browser web di localhost: 4200.
9. Klik pada Klik saya tombol. Komponen anak akan mengirimkan data dari komponen anak ke komponen induk.

Mengirim Data ke Komponen Lain Menggunakan Output Decorator

Ada dekorator lain yang dapat Anda gunakan di Angular, seperti dekorator Input atau dekorator Komponen. Anda dapat mempelajari lebih lanjut tentang cara menggunakan dekorator lain di Angular untuk menyederhanakan kode Anda.