Angular-da ma'lumotlarni ota komponentga uzatish

Farzand komponentdan ota komponentga ma'lumotlarni uzatish mumkin. Bu maxsus EventEmitter obyekti va emit metodi yordamida hodisalarni chiqarish orqali amalga oshiriladi. Farzand komponent hodisalarni chiqaradi, hodisa bilan birga ma'lum ma'lumotlarni uzatadi, ota komponent esa hodisalarni ushlab, farzand komponentdan ma'lumotlarni oladi.

Keling, amaliyotda sinab ko'raylik. Buning uchun biz bir qator amallarni bajarishimiz kerak. Boshlash uchun farzand komponentimizga @Output dekoratori va EventEmitter klassini import qilamiz:

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

Endi farzand klassda onData xususiyatini yaratamiz, uning qiymati ichida satr bo'lgan yangi EventEmitter obyekti bo'ladi:

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

Endi send metodini yaratamiz, uning chaqiruvi onData hodisasini berilgan matn bilan ota komponentga chiqaradi:

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

Farzand komponentning shablonida tugma yaratamiz, uning bosilishida send metodi chaqiriladi:

<button (click)="send()">
	ma'lumot uzatish
</button>

Ota komponentda onData metodini yaratamiz, u avtomatik ravishda chaqiriladi, farzand komponentdan mos hodisa chiqarilganda. Metod parametriga uzatilgan ma'lumotlar tushadi:

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

Ota komponentning shablonida farzand komponent tegiga hodisani bog'laymiz:

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

Farzand komponentda turli hodisalarni chiqaradigan uchta tugma yaring. Chiqarilgan hodisalarni ota komponentda ushlang.