Prenos dát do podradeného komponentu v Angular

Dáta je možné prenášať z nadradeného komponentu do podradeného. Tieto dáta budú prechádzať do vlastností podradenej triedy. Pozrime sa, ako sa to robí.

Na začiatok vytvoríme v triede podradeného komponentu vlastnosti, do ktorých budú importované dáta z nadradeného komponentu:

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

Teraz musíme deklarovať, že do týchto vlastností budú zvonku vstupovať dáta. Na toto sa používa špeciálny dekorátor Input. Importujeme ho do nášho podradeného komponentu:

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

A teraz aplikujme tento dekorátor na naše vlastnosti:

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

Pridajme výstup dát do súboru šablóny podradeného komponentu:

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

A teraz v šablóne rodiča pri volaní značky podradeného komponentu napíšme atribúty, ktorých mená budú zodpovedať menám našich vlastností podradenej triedy. Hodnoty týchto atribútov prejdú do vlastností podradenej triedy:

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