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. ඒවායේ අගයන් දරු සංරචකයේ ටෙම්ප්ලේට් එකේ ප්‍රතිදානය කරන්න.