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>

Бала компонентте ар кандай окуяларды чыгаруучу үч баскычты жасаңыз. Чыгарылган окуяларды ата-эне компонентте кармаңыз.