Penghantaran Data ke Komponen Induk dalam Angular

Data boleh dihantar dari komponen anak ke komponen induk. Ini dilakukan dengan memancarkan peristiwa menggunakan objek khas EventEmitter dan kaedah emit. Komponen anak akan memancarkan peristiwa, menghantar bersama-sama dengan peristiwa beberapa data, manakala komponen induk akan menangkap peristiwa, memperoleh data dari komponen induk.

Mari kita cuba dalam amalan. Untuk ini kita perlu melakukan beberapa langkah. Pertama, ke dalam komponen anak kita, import decorator @Output dan kelas EventEmitter:

import { Component, Output, EventEmitter } from '@angular/core';

Sekarang dalam kelas anak buatkan sifat onData, yang nilainya akan menjadi objek baharu EventEmitter, mengandungi tali:

export class UserComponent {
	@Output()
	public onData = new EventEmitter<string>();
}

Sekarang buatkan kaedah send, panggilan yang akan memancarkan peristiwa onData ke komponen induk dengan teks yang ditentukan:

export class UserComponent {
	@Output()
	public onData = new EventEmitter<string>();
	
	send() {
		this.onData.emit('xxx');
	}
}

Dalam templat komponen anak, buatkan tombol, yang upon klik akan memanggil kaedah send:

<button (click)="send()">
	hantar data
</button>

Dalam komponen induk, buatkan kaedah onData, yang akan secara automatik dipanggil, apabila dari komponen anak peristiwa sepadan dipancarkan. Ke dalam parameter kaedah akan dimasukkan data yang dihantar:

export class AppComponent {
	public onData(data: string) {
		console.log(data);
	}
}

Dalam templat komponen induk ikat kepada tag komponen anak peristiwa:

<app-user (onData)="onData($event)"></app-user>

Dalam komponen anak buatkan tiga tombol, memancarkan peristiwa yang berbeza. Tangkap peristiwa yang dipancarkan dalam komponen induk.