Angular တွင် ဝန်ဆောင်မှုတစ်ခုအား အခြားဝန်ဆောင်မှုတစ်ခုအတွင်း ထည့်သွင်းခြင်း

ကျွန်ုပ်တို့၏ ပရောဂျက်အတွက် လုပ်ဆောင်ရာတွင် ၎င်းတို့၏ လုပ်ဆောင်ချက်များကို ချဲ့ထွင်ရန် ဝန်ဆောင်မှုတစ်ခုအား အခြားဝန်ဆောင်မှုတစ်ခုထဲသို့ ထည့်သွင်းရန် လိုအပ်နိုင်သည်။ ဒေတာအသစ်များ ထည့်သွင်းသည့်အခါ console တွင် မက်ဆေ့ဂျ်များကို ပြသမည့် နောက်ထပ် ဝန်ဆောင်မှုတစ်ခု ဖန်တီးကြပါစို့။

ပထမဦးစွာ test/src/app ဖိုလ်ဒါအတွင်း ဖိုင် log.service.ts ကို ဖန်တီးပါ။ LogService class ကို export လုပ်ပြီး console တွင် မက်ဆေ့ဂျ်ပြသရန် write function ကို ရေးသားပါမည်။

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

@Injectable()
export class LogService {
  write(message: string) {
    console.log(message);
  }
}

ထို့နောက် ကျွန်ုပ်တို့၏ DataService ဝန်ဆောင်မှုထဲသို့ သွားပြီး ကျွန်ုပ်တို့၏ ဝန်ဆောင်မှုအသစ်ကို import လုပ်၊ inject လုပ်ပြီး အသုံးပြုပါမည်။

app/data.service.tsimport { Injectable } from '@angular/core';
import { LogService } from './log.service'; // import လုပ်သည်

@Injectable()
export class DataService {
  private data: string[] = ['a', 'b', 'c'];
  
  constructor(private logService: LogService) { // inject လုပ်သည်
    
  }
  
  getData(): string[] {
    this.logService.write('data received'); // အသုံးပြုသည်
    return this.data;
  }
  
  addData(name: string){
    this.data.push(name);
    this.logService.write('new elem added'); // အသုံးပြုသည်
  }
}

သို့သော် ဤအရာသည် မလုံလောက်သေးပါ။ တိုက်ရိုက်အသုံးမပြုသော်လည်း Component class အတွင်း၌ ဝန်ဆောင်မှုအသစ်ကို ထည့်သွင်းရန် လိုအပ်ပါသည်။

app/app.component.tsimport { Component } from '@angular/core';
import {DataService} from './data.service';
import {LogService} from './log.service'; // import လုပ်သည်

@Component({
  ........
  providers: [DataService, LogService] // ထည့်သွင်းသည်
})