Дерек компонентке деректерді беру Angular-те

Ата-ана компонентінің деректерін дерек компонентке бере аласыз. Бұл деректер дерек класының қасиеттеріне енеді. Мұны қалай жасайтынымызға тоқталайық.

Алдымен, дерек компонент класында ата-ана компонентінен деректер әкелінетін қасиеттерді жасайық:

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

Енді бізге осы қасиеттерге сырттан деректер кіретінін жариялау керек. Ол үшін арнайы Input декораторы қолданылады. Оны біздің дерек компонентімізге импорттайық:

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

Енді осы декораторы біздің қасиеттерімізге қолданайық:

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

Деректерді дерек компоненттің темплейт файлына шығаруды қосамыз:

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

Енді ата-ананың темплейтінде дерек компонентінің тегін шақырған кезде, атаулары біздің дерек класымыздың қасиет атауларымен сәйкес келетін атрибуттарды жазайық. Осы атрибуттардың мәндері дерек класының қасиеттеріне енеді:

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