Angular ရှိ ကိုယ်ပိုင် Components များ

သင်ခန်းစာအစတွင် ဖော်ပြခဲ့သည့်အတိုင်း၊ Angular တွင် ပရောဂျက်တစ်ခုလုံးကို component များအဖြစ် ခွဲခြားထားသည်။ ယခင်သင်ခန်းစာများတွင် ကျွန်ုပ်တို့သည် ပုံသေဖန်တီးထားသော အဓိက component တစ်ခုတည်းနှင့်သာ လုပ်ဆောင်ခဲ့သည်။ ယခု ကိုယ်ပိုင် components များဖန်တီးနည်းကို သင်ယူကြပါစို့။

အသစ် component များ၏ code ကို Angular မှ အထူး terminal command တစ်ခုဖြစ်သော generate component ကိုအသုံးပြု၍ အလိုအလျောက် generate လုပ်ပေးသည်။ component စကားလုံးပြီးနောက်တွင် ကျွန်ုပ်တို့၏ component အသစ်၏ အမည်ကို ရေးရပါမည်။ ကျွန်ုပ်တို့သည် user component တစ်ခုကို generate လုပ်လိုသည်ဆိုပါစို့။

ng generate component user

Command ကို execute လုပ်ပြီးနောက်တွင် app/user folder အသစ်တစ်ခုပေါ်လာသည်ကို တွေ့ရပါမည်။ ၎င်းအတွင်း၌ component ၏ file အားလုံး ရှိလာမည်ဖြစ်သည်။

Component file ဖြစ်သော user.component.ts တွင် Component decorator ကို အလိုအလျောက် ဖန်တီးပေးထားမည်ဖြစ်သည်။

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

ထို့အပြင် ဤ file တွင် component class ကို အလိုအလျောက် ဖန်တီးပေးမည်ဖြစ်သည်။

export class UserComponent {

}

ယခုတွင် ကျွန်ုပ်တို့၏ ကိုယ်ပိုင် component ကို မိဘ component သို့ ချိတ်ဆက်ရပါမည်။ မိဘ component သည် framework ထည့်သွင်းချိန်မှစ၍ ပါဝင်ပြီးသား app component ဖြစ်ပါစေ။ ၎င်းအတွင်းသို့ ကျွန်ုပ်တို့၏ component ကို import လုပ်ကြပါစို့။

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

Component decorator ၏ imports key တွင် ကျွန်ုပ်တို့ import လုပ်ထားသော component ကို ဖော်ပြရပါမည်။

@Component({
	selector: 'app-root',
	imports: [UserComponent], // ဤနေရာ
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

ယခုတွင် ကိုယ်ပိုင် component ၏ အကြောင်းအရာကို မိဘ component အတွင်း၌ ထုတ်ပြနိုင်ပြီဖြစ်သည်။ ထိုသို့ပြုလုပ်ရန် မိဘ၏ template file တွင် အထူး tag တစ်ခုကို ရေးရပါမည်။ ထို tag ၏ အမည်ကို @Component decorator ၏ selector property တွင် သတ်မှတ်ပေးထားသည်။ ကျွန်ုပ်တို့၏ ကိစ္စတွင် ၎င်းမှာ app-user tag ဖြစ်သည်။ မိဘ၏ template အတွင်း၌ ၎င်းကို ရေးကြည့်ပါမည်။

စာသားအချို့
<app-user></app-user>

ProductComponent component တစ်ခုကို generate လုပ်ပါ။ ထို component ကို သင်၏ပရောဂျက်ရှိ အဓိက component သို့ ချိတ်ဆက်ပါ။

ကိုယ်ပိုင် component ၏ template ကို ပြင်ဆင်ပါ။ ပြောင်းလဲမှုများ browser ထဲတွင် သက်ရောက်ကြောင်း သေချာပါစေ။

ကိုယ်ပိုင် component ၏ CSS styles များကို ပြောင်းလဲပါ။ ၎င်းတို့သည် browser ထဲတွင် သက်ရောက်ကြောင်း သေချာပါစေ။

ကိုယ်ပိုင် component အတွင်းname နှင့် price properties များ ပြုလုပ်ပါ။ ၎င်းတို့၏တန်ဖိုးများကို ကိုယ်ပိုင် component ၏ template ထဲတွင် ထုတ်ပြပါ။