Angular-da Qo'shimcha Komponentlar

Darslikning boshida aytib o'tilganidek, Angular-da butun loyiha komponentlarga bo'linadi. Oldingi darslarda biz faqat standart yaratilgan asosiy komponent bilan ishladik. Keling, endi qo'shimcha komponentlar yaratishni o'rganaylik.

Yangi komponentlarning kodi maxsus terminal buyrug'i yordamida Angular tomonidan avtomatik yaratiladi: generate component. component so'zidan keyin bizning yangi komponentimiz nomini yozishimiz kerak. Aytaylik, biz user komponentini yaratmoqchimiz:

ng generate component user

Buyruq bajarilgandan so'ng, bizda app/user yangi papka paydo bo'lganini ko'ramiz. Unda komponentning barcha standart fayllari bo'ladi.

user.component.ts komponent faylida komponent dekoratori avtomatik yaratiladi:

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

Shuningdek, ushbu faylda komponent klassi avtomatik yaratiladi:

export class UserComponent {

}

Endi bizning qo'shimcha komponentimizni ota komponentga ulashimiz kerak. Ota komponent app bo'lsin, framework o'rnatilganda dastlab mavjud bo'lgan. Unga komponentimizni import qilaylik:

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

Komponent dekoratoridagi imports kalitida import qilingan komponentimizni ko'rsatamiz:

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

Endi biz qo'shimcha komponent mazmunini ota komponentda chiqarishimiz mumkin. Buning uchun otaning shablon faylida maxsus teg yozish kerak, uning nomi @Component dekoratorining selector xususiyatida belgilangan. Bizning holatda bu app-user tegi. Uni otaning shablonida yozamiz:

ba'zi matn
<app-user></app-user>

ProductComponent komponentini yarating. Ushbu komponentni loyihangizning asosiy komponentiga ulang.

Qo'shimcha komponent shabloniga o'zgartirishlar kiriting. Brauzerga qo'llanganligiga ishonch hosil qiling.

Qo'shimcha komponentning CSS uslublarini o'zgartiring. Brauzerga qo'llanganligiga ishonch hosil qiling.

Qo'shimcha komponentda name va price xususiyatlarini yarating. Ularning qiymatlarini qo'shimcha komponent shablonida chiqaring.