Uhamisho wa Data kwa Komponensti Mtoto katika Angular

Inawezekana kuhamisha data kutoka kwa komponensti mzazi kwenye komponensti mtoto. Data hizi zitafika katika sifa za darasa la mtoto. Tuangalie jinsi hii inafanyika.

Kuanza, tutatengeneza sifa katika darasa la komponensti mtoto, ambazo data zitakuingizwa kutoka kwa komponensti mzazi:

class UserComponent {
	public name: string = '';
	public age: number = 0;
}

Sasa tunahitaji kutangaza kwamba katika hizi sifa data zitaingia kutoka nje. Kwa hili hutumkiwa dekoreta maalum Input. Hebu tuingize kwenye komponensti yetu ya mtoto:

import { Input } from '@angular/core';

Na sasa tutatumia dekoreta hii kwa sifa zetu:

class UserComponent {
	@Input()
	public name: string = '';
	
	@Input()
	public age: number = 0;
}

Wacha tuongeze uwasilishaji wa data kwenye faili ya kiolezo (template) ya komponensti mtoto:

<p>{{ name }}</p>
<p>{{ age }}</p>

Na sasa kwenye kiolezo cha mzazi wakati wa kuita lebo ya komponensti mtoto, tuandike sifa/vipengele (attributes), ambayo majina yao yatafanana na majina ya sifa za darasa la mtoto. Thamani za sifa hizi zitaingia kwenye sifa za darasa la mtoto:

<user-data name="john" age="25"></user-data>