Adatátvitel a gyermek komponensbe az Angular-ban

Az adatokat át lehet adni a szülő komponensből a gyermek komponensbe. Ezek az adatok a gyermek osztály tulajdonságaiba kerülnek. Nézzük meg, hogyan is történik ez.

Először hozzunk létre a gyermek komponens osztályában olyan tulajdonságokat, amelyekbe a szülő komponensből származó adatok importálódni fognak:

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

Most azt kell deklarálnunk, hogy ezekbe a tulajdonságokba kívülről fognak adatok érkezni. Ehhez egy speciális dekorátort használunk, a Input-ot. Importáljuk ezt a gyermek komponensünkbe:

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

És most alkalmazzuk ezt a dekorátort a mi tulajdonságainkra:

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

Adjunk hozzá adatkiírást a gyermek komponens template fájljába:

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

Most pedig a szülő template-jében, a gyermek komponens tag meghívásakor írjunk olyan attribútumokat, amelyek neve megegyezik a gyermek osztály tulajdonságainak nevével. Ezeknek az attribútumoknak az értékei a gyermek osztály tulajdonságaiba kerülnek:

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