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

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

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

app/user/user.component.tsclass UserComponent {
  public name: string = '';
  public age: number = 0;
}

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

app/user/user.component.tsimport { Input } from '@angular/core';

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

app/user/user.component.tsclass UserComponent {
  @Input()
  public name: string = '';
  
  @Input()
  public age: number = 0;
}

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

app/user/user.component.html<p>{{ name }}</p>
<p>{{ age }}</p>

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

app/app.component.html<user-data name="john" age="25"></user-data>