Duomenų perdavimas į antrinį komponentą Angular

Galima perduoti duomenis iš pagrindinio komponento į antrinį. Šie duomenys pateks į antrinio klasės savybes. Pažiūrėkime, kaip tai daroma.

Pirmiausia antrinio komponento klasėje sukurkime savybes, į kurias bus importuojami duomenys iš pagrindinio komponento:

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

Dabar turime paskelbti, kad į šias savybes iš išorės bus perduodami duomenys. Tam naudojamas specialus dekoratorius Input. Importuokime jį į mūsų antrinį komponentą:

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

O dabar pritaikykime šį dekoratorių mūsų savybėms:

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

Pridėkime duomenų išvedimą į antrinio komponento šablono failą:

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

O dabar pagrindinio komponento šablone, iškviečiant antrinio komponento žymę, parašykime atributus, kurių pavadinimai atitiks mūsų antrinės klasės savybių pavadinimus. Šių atributų reikšmės pateks į antrinės klasės savybes:

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