მონაცემების გადაცემა შვილობილ კომპონენტში Angular-ში

შესაძლებელია მონაცემების გადაცემა მშობელი კომპონენტიდან შვილობილში. ეს მონაცემები შვილობილი კლასის თვისებებში ჩაჯდება. მოდით ვნახოთ, როგორ კეთდება ეს.

დასაწყისად, შევქმნათ შვილობილი კომპონენტის კლასში თვისებები, რომლებშიც მშობელი კომპონენტიდან მონაცემები იმპორტირდება:

class UserComponent {
	public name: string = '';
	public age: number = 0;
}

ახლა ჩვენ უნდა განვაცხადოთ, რომ ამ თვისებებში გარედან მონაცემები ჩაეშვება. ამისთვის გამოიყენება სპეციალური დეკორატორი Input. იმპორტირება მოდით იგი ჩვენს შვილობილ კომპონენტში:

import { Input } from '@angular/core';

ახლა კი გამოვიყენოთ ეს დეკორატორი ჩვენი თვისებებისთვის:

class UserComponent {
	@Input()
	public name: string = '';
	
	@Input()
	public age: number = 0;
}

დავამატოთ მონაცემების გამოტანა შვილობილი კომპონენტის ტემპლეიტის ფაილში:

<p>{{ name }}</p>
<p>{{ age }}</p>

ახლა კი მშობელის ტემპლეიტში შვილობილი კომპონენტის თაგის გამოძახებისას დავწეროთ ატრიბუტები, რომელთა სახელები ემთხვევა ჩვენი შვილობილი კლასის თვისებების სახელებს. ამ ატრიბუტების მნიშვნელობები შვილობილი კლასის თვისებებში ჩაეშვება:

<user-data name="john" age="25"></user-data>