Angularда родитель компонентига маълумот узатиш

Фарзанд компонентдан родитель компонентига маълумот узатиш мумкин. Бу махсус объект EventEmitter ва emit методи ёрдамида воқеалар чиқариш орқали амалга оширилади. Фарзанд компонент воқеалар чиқариб, воқеа билан бирга маълумотларни юборади, родитель компонент эса воқеаларни тутиб, родитель компонентдан келган маълумотларни олади.

Амалиётда синаб кўрамиз. Бунинг учун бизга бир катор қадамларни бажариш керак. Бошлаш учун фарзанд компонентимизга @Output декоратори ва EventEmitter синфини импорт қиламиз:

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

Энди фарзанд синфида onData хусусиятини яратамиз, унинг қиймати сатр ўз ичига олган янги EventEmitter объекти бўлади:

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

Энди send методини яратамиз, унинг чақирилиши onData воқеасини берилган матн билан родитель компонентига чиқаради:

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

Фарзанд компонентнинг шаблонида тугма яратамиз, уни босганда send методу чақирилади:

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

Родитель компонентида onData методини яратамиз, у фарзанд компонентдан мос воқеа чиқарилганда автоматик чақирилади. Методнинг параметрига узатилган маълумотлар тушади:

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

Родитель компонентнинг шаблонида фарзанд компонент тегига воқеани боглаймиз:

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

Фарзанд компонентада турли воқеалар чиқарувчи учта тугма яратинг. Чиқарилган воқеаларни родитель компонентада тутинг.