Duomenų perdavimas į antrinį komponentą Angular

Galima perduoti duomenis iš pagrindinio komponento į antrinį. Šie duomenys pateks į antrinio klasės savybes. Pažiūrėkime, kaip tai daroma.

Pirmiausia antrinio komponento klasėje sukurkime savybes, į kurias bus importuojami duomenys iš pagrindinio komponento:

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

Dabar turime paskelbti, kad į šias savybes iš išorės bus perduodami duomenys. Tam naudojamas specialus dekoratorius Input. Importuokime jį į mūsų antrinį komponentą:

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

O dabar pritaikykime šį dekoratorių mūsų savybėms:

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

Pridėkime duomenų išvedimą į antrinio komponento šablono failą:

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

O dabar pagrindinio komponento šablone, iškviečiant antrinio komponento žymę, parašykime atributus, kurių pavadinimai atitiks mūsų antrinės klasės savybių pavadinimus. Šių atributų reikšmės pateks į antrinės klasės savybes:

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