Angular တွင် Service ဖန်တီးခြင်း

Services များကို လေ့လာခြင်းကို ကိုယ်ပိုင် service တစ်ခုဖန်တီးခြင်းဖြင့် စတင်ကြပါစို့။ ၎င်းအတွက် test/src/app ဖိုလ်ဒါထဲတွင် data.service.ts ဖိုင်ကို ဖန်တီးပါမည်။ ကျွန်ုပ်တို့၏ service သည် စခရင်ပေါ်သို့ အချို့သော အချက်အလက်များကို ပြသရန် တာဝန်ယူရမည်။

ကျွန်ုပ်တို့၏ service အတွက် class ဖန်တီးကြပါစို့။

data.service.tsexport class DataService {
  
}

ယခု ကျွန်ုပ်တို့အတွက် decorator Injectable လိုအပ်ပါသည်။ ၎င်း၏အသုံးပြုခြင်းက service class ကို component class ထဲသို့ ထည့်သွင်း နိုင်စေရန် ခွင့်ပြုပါလိမ့်မည်။ ထည့်သွင်းခြင်းအကြောင်းကို နောက်သင်ခန်းစာတွင် ဆွေးနွေးပါမည်။ ယခုအတွက် လိုအပ်သော decorator ကို import လုပ်ပါမည်။

data.service.tsimport { Injectable } from '@angular/core';

export class DataService {
  
}

၎င်းကို ကျွန်ုပ်တို့၏ class သို့ အသုံးပြုပါမည်။

data.service.tsimport { Injectable } from '@angular/core';

@Injectable()
export class DataService {
  
}

ယခု ကျွန်ုပ်တို့၏ class ထဲတွင် အချို့သော အချက်အလက်များ ရှိစေရန် ပြုလုပ်ပါမည်။ ပုံမှန်အားဖြင့် Angular applications များတွင် ဆာဗာမှ အချက်အလက်များကို လုပ်ဆောင်သော်လည်း သင်ကြားရေးရည်ရွယ်ချက်များအတွက် array တစ်ခုကို အသုံးပြုပါမည်။ ၎င်းကို private property အဖြစ် ဖန်တီးပါမည်။

data.service.tsexport class DataService {
  private data: string[] = ['a', 'b', 'c'];
}

ယခု အချက်အလက်များရယူရန် method ကို ရေးသားပါမည်။

data.service.tsexport class DataService {
  private data: string[] = ['a', 'b', 'c'];

  getData(): string[] {
    return this.data;
  }
}

ကျွန်ုပ်တို့၏ service ပြင်ဆင်ပြီးဖြစ်သည်။ နောက်သင်ခန်းစာတွင် ၎င်းကို component class သို့ ချိတ်ဆက်ပါမည်။

typescript[
  {
    name: 'prod1',
    cost: 100,
  },
  {
    name: 'prod2',
    cost: 200,
  },
  {
    name: 'prod3',
    cost: 300,
  },
]