Angular 2 - บริการ

บริการจะใช้เมื่อจำเป็นต้องจัดเตรียมฟังก์ชันการทำงานทั่วไปให้กับโมดูลต่างๆ ตัวอย่างเช่นเราสามารถมีฟังก์ชันฐานข้อมูลที่สามารถนำมาใช้ซ้ำระหว่างโมดูลต่างๆ และด้วยเหตุนี้คุณจึงสามารถสร้างบริการที่สามารถใช้งานฐานข้อมูลได้

ต้องดำเนินการขั้นตอนสำคัญต่อไปนี้เมื่อสร้างบริการ

Step 1- สร้างคลาสแยกต่างหากซึ่งมีมัณฑนากรแบบฉีดได้ มัณฑนากรแบบฉีดช่วยให้สามารถฉีดและใช้ฟังก์ชันของคลาสนี้ในโมดูล Angular JS ใดก็ได้

@Injectable() 
   export class classname {  
}

Step 2 - ถัดไปในโมดูล appComponent หรือโมดูลที่คุณต้องการใช้บริการคุณต้องกำหนดเป็นผู้ให้บริการใน @Component มัณฑนากร

@Component ({  
   providers : [classname] 
})

ลองดูตัวอย่างวิธีการบรรลุเป้าหมายนี้ ต่อไปนี้เป็นขั้นตอนที่เกี่ยวข้อง

Step 1 - สร้างไฟล์ ts ไฟล์สำหรับบริการที่เรียกว่า app.service.ts

Step 2 - วางรหัสต่อไปนี้ในไฟล์ที่สร้างด้านบน

import { 
   Injectable 
} from '@angular/core';  

@Injectable()
export class appService {  
   getApp(): string { 
      return "Hello world"; 
   } 
}

ประเด็นต่อไปนี้ต้องสังเกตเกี่ยวกับโปรแกรมข้างต้น

  • มัณฑนากรแบบฉีดนำเข้าจากโมดูลเชิงมุม / แกน

  • เรากำลังสร้างคลาสที่เรียกว่า appService ซึ่งตกแต่งด้วยมัณฑนากร Injectable

  • เรากำลังสร้างฟังก์ชันง่ายๆที่เรียกว่า getApp ซึ่งส่งคืนสตริงธรรมดาที่เรียกว่า“ Hello world”

Step 3 - ในไฟล์ app.component.ts ให้ใส่รหัสต่อไปนี้

import { 
   Component 
} from '@angular/core';  

import { 
   appService 
} from './app.service';  

@Component ({ 
   selector: 'demo-app', 
   template: '<div>{{value}}</div>', 
   providers: [appService] 
}) 

export class AppComponent { 
   value: string = ""; 
   constructor(private _appService: appService) { }  

   ngOnInit(): void { 
      this.value = this._appService.getApp(); 
   } 
}

ประเด็นต่อไปนี้ต้องสังเกตเกี่ยวกับโปรแกรมข้างต้น

  • ขั้นแรกเรานำเข้าโมดูล appService ของเราในโมดูล appComponent

  • จากนั้นเราลงทะเบียนบริการเป็นผู้ให้บริการในโมดูลนี้

  • ในตัวสร้างเรากำหนดตัวแปรที่เรียกว่า _appService ของประเภท appService เพื่อให้สามารถเรียกใช้ที่ใดก็ได้ในโมดูล appComponent

  • ตัวอย่างเช่นใน ngOnInit lifecyclehook เราเรียกว่าฟังก์ชัน getApp ของบริการและกำหนดผลลัพธ์ให้กับคุณสมบัติค่าของคลาส AppComponent

เมื่อคุณบันทึกการเปลี่ยนแปลงโค้ดทั้งหมดและรีเฟรชเบราว์เซอร์คุณจะได้ผลลัพธ์ดังต่อไปนี้