Ենթակոմպոնենտները 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 հատկությունները: Արտածեք դրանց արժեքները երեխա կոմպոնենտի տեմպլեյտում: