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