Andmete edastamine lapsekomponendis Angularis

Andmeid saab edastada vanemkomponendist lapsekomponendisse. Need andmed jõuavad lapseklassi omadustesse. Vaatame, kuidas seda tehakse.

Alustuseks loome lapsekomponendi klassi omadused, kuhu imporditakse andmed vanemkomponendist:

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

Nüüd peame deklareerima, et nendesse omadustesse jõuavad andmed väljastpoolt. Selleks kasutatakse spetsiaalset dekoraatorit Input. Impordime selle oma lapsekomponenti:

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

Ja nüüd rakendame seda dekoraatorit meie omadustele:

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

Lisame andmete väljundi lapsekomponendi mallifaili:

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

Ja nüüd kirjutame vanema mallis lapsekomponendi tagi kutsumisel atribuudid, mille nimed ühtivad meie lapseklassi omaduste nimedega. Nende atribuutide väärtused jõuavad lapseklassi omadustesse:

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