Halo, Habr! Saya mempersembahkan kepada Anda terjemahan artikel
"Memahami @Input, @Output, dan EventEmitter in Angular" oleh foolishneo.
Salam kepada semua yang ingin mengumpulkan informasi tentang seluk-beluk kerangka Angular.
Hari ini saya merasa perlu untuk mempelajari informasi tentang pengaturan interaksi antara komponen Angular dengan lebih baik dan mulai mempraktikkan terjemahan artikel yang menarik bagi saya dari bahasa Inggris.
Saya harap ada beberapa yang bermanfaat untuk terjemahan artikel dari
Medium .
Setelah lama memiliki keinginan untuk mulai menerjemahkan artikel yang bermanfaat dari bahasa Inggris, saya memutuskan untuk memulai dengan yang sederhana, tidak terlalu banyak, tetapi mungkin melengkapi pengetahuan artikel yang ada. Atas perhatian Anda, Tuan-tuan ...
Bagi mereka yang baru mengenal Angular, dekorator
Input dan
Output dapat memalukan, terutama ketika Anda mencoba untuk mengetahui tujuannya dengan sampel kode. Pada artikel ini, saya akan mencoba menjelaskannya dengan cara sesederhana mungkin.
Alat pertukaran data
Pertama-tama, tugas dekorator
Input dan
Output adalah untuk bertukar data antara komponen. Mereka adalah mekanisme untuk menerima / mengirim data dari satu komponen ke komponen lainnya.
Input digunakan untuk menerima data, sedangkan
Output digunakan untuk mengirimnya.
Output mengirimkan data dengan mengekspos mereka sebagai produser acara, biasanya sebagai objek dari kelas
EventEmitter.Dengan demikian, ketika Anda melihat kode, dalam rupa ini:
@Component({ selector: 'todo-item', ... }) export class TodoItemComponent { @Input() item @Output() onChange = new EventEmitter() }
maksudnya:
- Hei, saya berharap data dikirimkan kepada saya. Saya akan mendapatkannya dan menyimpannya sebagai nilai properti item.
- Ngomong-ngomong, saya akan menjadi alasan untuk mengirim data menggunakan properti onChange.
Katakanlah Anda memiliki komponen
TodoList yang berisi komponen
TodoItem .
Dalam
templat komponen
TodoLis t, Anda berharap melihat:
... <todo-item [item]="myTask" (onChange)="handleChange($event)" </todo-item> ...
apa artinya:
- Komponen TodoList menempatkan nilai data di properti myTask dan meneruskannya ke komponen TodoItem
- Data yang ditransfer dari komponen TodoItem akan diterima dan diproses oleh fungsi handleChange () dari komponen TodoList
Teori yang cukup. Mari kita lihat sebuah contoh.
@ Input dan Output dalam aksi.
Perhatikan
sebuah contoh.Di sini saya membuat 2 komponen, komponen
halo , bersarang di komponen
aplikasi . Komponen
halo memiliki
Input dan
Output :
hello.component.ts @Component({ selector: 'hello', template: ` <h3 (click)="onClick.emit('Neo')"> ... </h3> ` }) export class HelloComponent { @Input() myFriend: string @Output() onClick = new EventEmitter() }
Komponen
halo mengharapkan untuk mendapatkan nilai string dan meletakkannya sebagai nilai properti
myFriend .
@Input() myFriend: string
Setiap kali Anda mengkliknya, properti pengiriman data
onClick dari dekorator
Output akan mengirimkan string ke "dunia luar" dengan konten "Neo".
<h3 (click)="onClick.emit('Neo')">
Di bawah ini adalah kode komponen
aplikasi :
app.component.ts export class AppComponent { ng = 'Angular' myName = 'Neo' upCase(st:string): void { ... } } app.component.html <hello myFriend="{{ ng }}" (onClick)="upCase($event)"></hello> <h3>My name is {{ myName }}</h3>
Perhatikan bahwa komponen
aplikasi menggunakan tag komponen
halo dalam templatnya, yang melakukan 2 tindakan:
- meneruskan nilai string 'Sudut' ke komponen halo menggunakan properti ng
- dan menerima nilai yang dikirim dari komponen halo dan memproses nilai yang diterima menggunakan fungsi upCase ():
<hello myFriend="{{ ng }}" (onClick)="upCase($event)">
Anda dapat melihat aplikasi beraksi di
sini.