Overføring av data til en underkomponent i Angular

Det er mulig å overføre data fra en foreldrekomponent til en underkomponent. Disse dataene vil komme inn i egenskapene til underklassen. La oss se hvordan dette gjøres.

Først lager vi egenskaper i underkomponentens klasse som dataene fra foreldrekomponenten vil importeres til:

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

Nå må vi erklære at data fra utsiden vil komme inn i disse egenskapene. For å gjøre dette brukes en spesiell dekoratør Input. La oss importere den til vår underkomponent:

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

Og nå bruker vi denne dekoratøren for våre egenskaper:

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

La oss legge til utskrift av data i underkomponentens mal-fil:

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

Og nå i forelderens mal, når vi kaller på underkomponentens tagg, skriver vi attributter som navnene vil samsvare med navnene på våre egenskaper i underklassen. Verdiene av disse attributtene vil komme inn i underklassens egenskaper:

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