Overførsel af data til en underkomponent i Angular

Det er muligt at overføre data fra en forælderkomponent til en underkomponent. Disse data vil blive tilført egenskaberne i underklassen. Lad os se, hvordan det gøres.

Lad os til at starte med lave egenskaber i underkomponentens klasse, hvori data vil importeres fra forælderkomponenten:

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

Nu er vi nødt til at erklære, at data vil blive tilført disse egenskaber udefra. For at gøre dette bruges en speciel dekorator Input. Lad os importere den til vores underkomponent:

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

Og lad os nu anvende denne dekorator på vores egenskaber:

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

Lad os tilføje visning af data i underkomponentens skabelonfil:

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

Og nu i forælderens skabelon, når vi kalder underkomponentens tag, skriver vi attributter, hvis navne vil matche navnene på vores underklasseegenskaber. Værdierne for disse attributter vil blive tilført underklassens egenskaber:

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