Truyền dữ liệu đến component cha trong Angular

Có thể truyền dữ liệu từ component con đến component cha. Điều này được thực hiện bằng cách phát ra sự kiện với sự trợ giúp của đối tượng đặc biệt EventEmitter và phương thức emit. Component con sẽ phát ra các sự kiện, truyền cùng với sự kiện một số dữ liệu, còn component cha sẽ bắt các sự kiện, nhận dữ liệu từ component cha.

Hãy thử thực hành. Để làm điều này chúng ta cần thực hiện một loạt các bước. Đầu tiên, trong component con của chúng ta, hãy import decorator @Output và class EventEmitter:

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

Bây giờ trong class con, hãy tạo một thuộc tính onData, giá trị của nó sẽ là một đối tượng EventEmitter mới, chứa chuỗi:

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

Bây giờ hãy tạo phương thức send, việc gọi nó sẽ phát ra sự kiện onData đến component cha với văn bản đã cho:

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

	send() {
		this.onData.emit('xxx');
	}
}

Trong template của component con, hãy tạo một nút bấm, khi nhấp vào sẽ gọi phương thức send:

<button (click)="send()">
	gửi dữ liệu
</button>

Trong component cha, hãy tạo phương thức onData, phương thức này sẽ tự động được gọi khi từ component con phát ra sự kiện tương ứng. Vào tham số của phương thức sẽ nhận được dữ liệu được truyền:

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

Trong template của component cha, hãy liên kết sự kiện với thẻ của component con:

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

Trong component con, hãy tạo ba nút bấm, phát ra các sự kiện khác nhau. Hãy bắt các sự kiện được phát ra trong component cha.