Andmete edastamine lapsekomponendis Angularis

Andmeid saab edastada vanemkomponendist lapsekomponendisse. Need andmed jõuavad lapseklassi omadustesse. Vaatame, kuidas seda tehakse.

Alustuseks loome lapsekomponendi klassi omadused, kuhu imporditakse andmed vanemkomponendist:

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

Nüüd peame deklareerima, et nendesse omadustesse jõuavad andmed väljastpoolt. Selleks kasutatakse spetsiaalset dekoraatorit Input. Impordime selle oma lapsekomponenti:

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

Ja nüüd rakendame seda dekoraatorit meie omadustele:

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

Lisame andmete väljundi lapsekomponendi mallifaili:

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

Ja nüüd kirjutame vanema mallis lapsekomponendi tagi kutsumisel atribuudid, mille nimed ühtivad meie lapseklassi omaduste nimedega. Nende atribuutide väärtused jõuavad lapseklassi omadustesse:

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