შვილობილი კომპონენტები Angular-ში

როგორც თავიდანვე იყო ნახსენები სახელმძღვანელოში, Angular-ში მთელი პროექტი იყოფა კომპონენტებად. წინა გაკვეთილებში ჩვენ ვმუშაობდით მხოლოდ მთავარ კომპონენტთან, რომელიც შექმნილი იყო ნაგულისხმევად. მოდით ახლა ვისწავლოთ შვილობილი კომპონენტების შექმნა.

ახალი კომპონენტების კოდი ავტომატურად გენერირდება Angular-ის მიერ სპეციალური ტერმინალის ბრძანების გამოყენებით: generate component. სიტყვის component შემდეგ უნდა დავწეროთ ჩვენი ახალი კომპონენტის სახელი. დავუშვათ, ჩვენ გვსურს გავაგენერიროთ კომპონენტი user:

ng generate component user

ბრძანების შესრულების შემდეგ ჩვენ დავინახავთ, რომ ჩვენთან გამოჩნდა ახალი საქაღალდე app/user. მასში იქნება ყველა სტანდარტული კომპონენტის ფაილი.

კომპონენტის ფაილში user.component.ts ავტომატურად შეიქმნება კომპონენტის დეკორატორი:

@Component({
	selector: 'app-user',
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

ასევე ამ ფაილში ავტომატურად შეიქმნება კომპონენტის კლასი:

export class UserComponent {

}

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

import { UserComponent } from './user/user.component';

კომპონენტის დეკორატორში გასაღებში imports მივუთითოთ ჩვენი გამოტანილი კომპონენტი:

@Component({
	selector: 'app-root',
	imports: [UserComponent], // აქ
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

ახლა ჩვენ შეგვიძლია გამოვსახოთ შვილობილი კომპონენტის შიგთავსი მშობელში. ამისთვის მშობლის ტემპლეიტის ფაილში უნდა დავწეროთ სპეციალური ტეგი, რომლის სახელიც მითითებულია თვისებაში selector დეკორატორის @Component შვილისა. ჩვენს შემთხვევაში ეს არის ტეგი app-user. დავწეროთ იგი მშობლის ტემპლეიტში:

რაღაც ტექსტი
<app-user></app-user>

გააგენერირეთ კომპონენტი ProductComponent. დააკავშირეთ ეს კომპონენტი თქვენი პროექტის მთავარ კომპონენტთან.

შეიტანეთ ცვლილებები შვილობილი კომპონენტის ტემპლეიტში. დარწმუნდით, რომ ისინი აისახება ბრაუზერში.

შეუცვალეთ შვილობილი კომპონენტის CSS სტილები. დარწმუნდით, რომ ისინი აისახება ბრაუზერში.

შვილობილ კომპონენტში შექმენით თვისებები name და price. გამოიტანეთ მათი მნიშვნელობები შვილობილი კომპონენტის ტემპლეიტში.