მონაცემების გადაცემა შვილობილ კომპონენტში 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>