Datu nodošana pakārtotajā komponentē Angular

Var nodot datus no vecāka komponentes uz pakārtoto komponenti. Šie dati nokļūs pakārtotās klases īpašībās. Paskatīsimies, kā tas tiek darīts.

Sākumā izveidosim pakārtotās komponentes klasē īpašības, kurās tiks importēti dati no vecāka komponentes:

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

Tagad mums ir jādeklarē, ka šajās īpašībās no ārpuses tiks ievadīti dati. Šim nolūkam tiek izmantots speciāls dekors Input. Importēsim to mūsu pakārtotajā komponentē:

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

Un tagad piemērosim šo dekoru mūsu īpašībām:

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

Pievienosim datu izvadi pakārtotās komponentes veidnes failā:

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

Un tagad vecāka komponentes veidnē, izsaucot pakārtotās komponentes tagu, rakstīsim atribūtus, kuru nosaukumi sakritīs ar mūsu pakārtotās klases īpašību nosaukumiem. Šo atribūtu vērtības nonāks pakārtotās klases īpašībās:

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