მონაცემების გადაცემა მშობელ კომპონენტში 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()">
	მონაცემების გაგზავნა
</button>

მშობელ კომპონენტში შევქმნათ მეთოდი onData, რომელიც ავტომატურად გამოიძახება, როდესაც შვილობილი კომპონენტიდან გამოსხივდება შესაბამისი მოვლენა. მეთოდის პარამეტრში მოხვდება გადაცემული მონაცემები:

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

მშობელი კომპონენტის ტემპლეიტში მივაბათ შვილობილი კომპონენტის ტეგს მოვლენა:

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

შვილობილ კომპონენტში შექმენით სამი ღილაკი, რომლებიც გამოსხივებენ სხვადასხვა მოვლენას. დაიჭირეთ გამოსხივებული მოვლენები მშობელ კომპონენტში.