Uhamisho wa Data kwa Sehemu Kuu katika Angular

Inawezekana kuhamisha data kutoka kwa sehemu ndogo kwenda kwa sehemu kuu. Hii inafanywa kwa kutuma matukio kwa kutumia kitu maalum EventEmitter na njia emit. Sehemu ndogo itatuma matukio, ikipeleka pamoja na tukio data fulani, na sehemu kuu itakamata matukio, ikiipata data kutoka kwa sehemu ndogo.

Tujaribu kwa vitendo. Kwa hili tunahitaji kufanya hatua kadhaa. Kwanza kwenye sehemu yetu ndogo ingiza kiambishi @Output na darasa EventEmitter:

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

Sasa kwenye darasa la mtoto tufanye sifa onData, ambayo thamani yake itakuwa kitu kipya EventEmitter, chenye mfuatano wa herufi:

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

Sasa tufanye njia send, utendaji ambao utatuma tukio onData kwenye sehemu kuu na maandishi yaliyowekwa:

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

Kwenye kiolezo cha sehemu ndogo tufanye kitufe, ambapo kubofya kwa hicho kitaomba njia send:

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

Kwenye sehemu kuu tufanye njia onData, ambayo itaitwa kiotomatiki inapotokea tukio kutoka kwa sehemu ndogo litakapotumwa. Kwenye kiingilio cha njia data iliyopitishwa itaingia:

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

Kwenye kiolezo cha sehemu kuu unganishe kwa lebo ya sehemu ndogo tukio:

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

Kwenye sehemu ndogo fanya vitatu vya kitufe, vyenye kutuma matukio mbalimbali. Kamata matukio yaliyotumwa kwenye sehemu kuu.