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']
})

Эми биз бала компоненттин ичиндеги мазмунду ата-эне компонентинде көрсөтө алабыз. Бул үчүн ата-эненин темплейт файлында атайын тег жазышыбыз керек, анын аты баланын @Component декораторунун selector касиетинде белгиленет. Биздин учурда бул app-user теги. Аны ата-эненин темплейтинде жазалы:

кээ бир текст
<app-user></app-user>

ProductComponent компонентин түзүңүз. Бул компоненти долбооруңуздун башкы компонентине туташтырыңыз.

Бала компоненттин темплейтине өзгөртүүлөр киргизиңиз. Алар браузерде колдонуларына ишендириңиз.

Бала компоненттин CSS стилдерин өзгөртүңүз. Алар браузерде колдонуларына ишендириңиз.

Бала компонентте name жана price касиеттерин түзүңүз. Алардын маанилерин бала компоненттин темплейтинде көрсөтүңүз.