Posredovanje podatkov v podrejeni komponent v Angular

Podatke je mogoče posredovati iz starševske komponente v podrejeno komponento. Ti podatki bojo prišli v lastnosti podrejenega razreda. Poglejmo, kako se to naredi.

Za začetek naredimo v razredu podrejene komponente lastnosti, v katere bodo uvoženi podatki iz starševske komponente:

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

Zdaj moramo razglasiti, da bodo v te lastnosti zunanje prišli podatki. Za to se uporablja poseben dekorator Input. Uvažamo ga v našo podrejeno komponento:

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

In zdaj uporabimo ta dekorator za naše lastnosti:

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

Dodajmo izpis podatkov v datoteko predloge podrejene komponente:

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

In zdaj v predlogi starša pri klicu oznake podrejene komponente napišimo atribute, katerih imena bodo sovpadala z imeni naših lastnosti podrejenega razreda. Vrednosti teh atributov bodo prišle v lastnosti podrejenega razreda:

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