Angular တွင် Component Class ဖိုင်ဖြစ်သော

မည်သည့် component တစ်ခု၏ အဓိကအစိတ်အပိုင်းမှာ ၎င်း၏လုပ်ဆောင်ချက်၊ တစ်နည်းအားဖြင့် ၎င်း၏ ပရိုဂရမ် ဖြစ်ပါသည်။ Angular တွင် component ၏ လုပ်ဆောင်ချက်ကို TypeScript ဘာသာစကားဖြင့် ရေးသားပြီး OOP class တစ်ခု အဖြစ် ကိုယ်စားပြုပါသည်။

Component တိုင်းတွင် ဤ class ကို ဖိုင်အမျိုးအစား .ts ဖြင့် ထားရှိပါသည်။ ကျွန်ုပ်တို့၏ အဓိက component တွင် ဤဖိုင်မှာ app.component.ts ဖြစ်ပါသည်။

ဤဖိုင်တွင်ပါဝင်သော အကြောင်းအရာများကို အသိအမှတ်ပြုကြပါစို့။ အစပိုင်းတွင် ကျွန်ုပ်တို့၏ component class ကို အာရုံစိုက်ပါ။

export class AppComponent {
	title: string = 'test';
}

ဤ class သို့ decorator @Component ကို အသုံးပြုထားပါသည်။ ဤ decorator သည် ၎င်း၏ parameter အဖြစ် object တစ်ခုကို လက်ခံပြီး၊ ၎င်းသည် ကျွန်ုပ်တို့၏ component ကို ပြင်ဆင်ဖွဲ့စည်းပေးသည်။

@Component({
	selector: 'app-root',
	standalone: true,
	imports: [FormsModule],
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css'],
})

templateUrl ဂုဏ်သတ္တိတွင် ကျွန်ုပ်တို့၏ component ၏ HTML layout ပါဝင်သော ဖိုင်သို့ လမ်းကြောင်း သတ်မှတ်ထားပါသည်။

styleUrls ဂုဏ်သတ္တိတွင် ကျွန်ုပ်တို့၏ component ၏ layout ကို အလှဆင်သော CSS ဖိုင်များသို့ လမ်းကြောင်းများ၏ အုပ်စုတစ်ခုကို သတ်မှတ်ထားပါသည်။ သင်မြင်တွေ့ရသည့်အတိုင်း၊ အလှဆင်ဖိုင်သည် တစ်ဖိုင်ထက် ပိုနိုင်ပါသည်။

selector ဂုဏ်သတ္တိတွင် ကျွန်ုပ်တို့၏ component ၏ HTML code ကို ထည့်သွင်း (တပ်ဆင်) မည့် HTML tag ၏ ရွေးချယ်မှု (selector) ကို သတ်မှတ်ထားပါသည်။ ကျွန်ုပ်တို့၏ ကိစ္စတွင် app-root အမည်ကို မြင်တွေ့ရပါမည်။ ဤအမည်နှင့် ကိုက်ညီသော tag ကို သတ်မှတ်ထားပါသည်။ ဤ tag ကို layout ဖိုင် src/index.html တွင် ရေးသားထားပါသည်။ ဤ tag ရေးထားသော နေရာသို့ပင် ကျွန်ုပ်တို့၏ component ၏ layout ကို ထည့်သွင်းပါလိမ့်မည်။

imports ဂုဏ်သတ္တိတွင် ကျွန်ုပ်တို့၏ component သို့ တင်သွင်းထားသော မော်ဂျူးများကို ဖော်ပြထားပါသည်။

standalone ဂုဏ်သတ္တိတွင် အမြဲတမ်း true တန်ဖိုးကို ဖော်ပြထားပါမည်။ လက်ရှိတွင် ၎င်းသည် Angular ၏ �န်ဆောင်မှုပိုင်းဆိုင်ရာ အရာတစ်ခု ဖြစ်နေသေးသောကြောင့် ယခုအချိန်တွင် ၎င်းအား နက်နက်နဲနဲ မလေ့လာသေးပါနှင့်။

app.component.ts ဖိုင်ကို ဖွင့်ပြီး ၎င်းကို လေ့လာပါ။

အလှဆင်ဖိုင်အချို့ကို ပြုလုပ်ပြီး decorator တွင် ၎င်းတို့ကို ချိတ်ဆက်ပါ။