Data-oordrag na 'n kinderkomponent in Angular

Dit is moontlik om data van die ouerkomponent na die kinderkomponent oor te dra. Hierdie data sal in die eienskappe van die kinderklas beland. Kom ons kyk hoe dit gedoen word.

Om te begin, laat ons in die klas van die kinderkomponent eienskappe maak waarin data van die ouerkomponent ingevoer sal word:

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

Nou moet ons verklaar dat data van buite in hierdie eienskappe sal beland. Vir hierdie doel word die spesiale dekorateur Input gebruik. Laat ons dit in ons kinderkomponent invoer:

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

En nou pas ons hierdie dekorateur op ons eienskappe toe:

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

Kom ons voeg die uitset van data by in die templaatlêer van die kinderkomponent:

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

En nou, in die templaat van die ouer, wanneer ons die etiket van die kinderkomponent oproep, skryf ons attribute waarvan die name sal ooreenstem met die name van ons eienskappe in die kinderklas. Die waardes van hierdie attribute sal in die eienskappe van die kinderklas beland:

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