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>