Տվյալների փոխանցում դուստր կոմպոնենտին Angular-ում

Հնարավոր է տվյալներ փոխանցել ծնող կոմպոնենտից դուստր կոմպոնենտին: Այս տվյալները կհասնեն դուստր դասի հատկություններին: Եկեք տեսնենք, թե ինչպես է դա արվում:

Սկսելու համար դուստր կոմպոնենտի դասում ստեղծենք հատկություններ, որոնց մեջ կներմուծվեն տվյալներ ծնող կոմպոնենտից.

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

Այժմ մենք պետք է հայտարարենք, որ այդ հատկությունների մեջ դրսից տվյալներ են մուտքագրվելու: Դրա համար օգտագործվում է հատուկ դեկորատոր Input: Ներմուծենք այն մեր դուստր կոմպոնենտ.

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

Եվ այժմ կիրառենք այս դեկորատորը մեր հատկությունների համար.

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

Ավելացնենք տվյալների արտածում դուստր կոմպոնենտի տեմպլեյտի ֆայլում.

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

Իսկ այժմ ծնողի տեմպլեյտում, դուստր կոմպոնենտի թեգը կանչելիս, գրենք ատրիբուտներ, որոնց անունները կհամընկնեն մեր դուստր դասի հատկությունների անունների հետ: Այդ ատրիբուտների արժեքները կհասնեն դուստր դասի հատկություններին.

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