Перадача даных у даччыны кампанент у 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>