Overførsel af data til en underkomponent i Angular

Det er muligt at overføre data fra en forælderkomponent til en underkomponent. Disse data vil blive tilført egenskaberne i underklassen. Lad os se, hvordan det gøres.

Lad os til at starte med lave egenskaber i underkomponentens klasse, hvori data vil importeres fra forælderkomponenten:

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

Nu er vi nødt til at erklære, at data vil blive tilført disse egenskaber udefra. For at gøre dette bruges en speciel dekorator Input. Lad os importere den til vores underkomponent:

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

Og lad os nu anvende denne dekorator på vores egenskaber:

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

Lad os tilføje visning af data i underkomponentens skabelonfil:

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

Og nu i forælderens skabelon, når vi kalder underkomponentens tag, skriver vi attributter, hvis navne vil matche navnene på vores underklasseegenskaber. Værdierne for disse attributter vil blive tilført underklassens egenskaber:

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