ตั้งค่า Injector กำหนด service class ใน provider เพื่อใช้งานใน Angular

เขียนเมื่อ 7 ปีก่อน โดย Ninenik Narkdee
dependency injection angular injector service provider

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ dependency injection angular injector service provider

ดูแล้ว 5,506 ครั้ง




ตามที่เราได้สร้าง service class ขึ้นมาแล้วในบทความตอนที่ผ่านมา 
และเนื้อหาต่อไปนี้ เราจะมาทำการตั้งค่าเพื่อใช้งาน Injector กัน
 
(ทบทวนบทความได้ที่)
รู้จัก Dependency injection หรือการนำเข้า services ใน Angular 
 
ก่อนทำการนำ Injector ไปใช้งานใน Angular App เราต้องทำการตั้งค่าก่อน โดยการ
กำหนดค่า service class เข้าไปใน provider เพื่อแสดงหรือบอก Angular ว่า Injector นี้
เป็น service class ที่จำเป็นสำหรับ App ของเรา
    ทำความเข้าใจง่ายๆ กล่าวคือ service class คือ class ใน Angular ที่เราสร้างขึ้นมาเพื่อ
ทำหน้าที่ใดๆ โดยก่อนที่จะไปทำงานภายใน App ของเราได้นั้น    จะต้องทำการขึ้นทะเบียน
เป็นผู้ให้บริการก่อน    การขึ้นทะเบียนเป็นผู้ให้บริการก็คือ การไปกำหนดค่าใน provider   โดย
หลังจากขึ้นทะเบียนแล้ว service class ของเราก็จะกลายเป็น Injector ผู้ให้บริการ service 
ภายใน App ยกตัวอย่างเช่น staff service ของเรา พอขึ้นทะเบียนเป็นผู้ให้บริการ โดยการกำหนด
ค่าใน provider แล้ว ก็จะกลายเป็น Injector   ทำหน้าที่ให้บริการในการจัดหาข้อมูลรายชื่อ staff
ทั้งหมดมาใช้งานใน App แบบนี้เป็นต้น
 

    การขึ้นทะเบียนผู้ให้บริการหรือ Provider นั้น สามารถทำได้ 2 วิธี

  • การกำหนด provider ใน NgModule
  • การกำหนด provider ใน App Component
 
    โดยเลือกอย่างใดอย่างหนึ่ง ขึ้นกับขอบเขตการที่เราจะนำ Injector นั้นๆ ไปใช้งาน
 
 

1.การกำหนด provider ใน NgModule

    เราสามารถขึ้นทะเบียน provider  ไฟล์ app.module.ts โดยกำหนดค่าเป็นข้อมูลแบบ Array
เข้าไปใน providers metadata ของ @NgModule สมมติเรากำหนด StaffService ของเราลงไป
ส่วนนี้ ก็จะได้ไฟล์ app.module.ts เป็นดังนี้ 
 

ไฟล์ app.module.ts

 
 

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';
import { UserComponent }  from './components/user.component';
import { StaffFormComponent }  from './components/staff-form.component';
import { StaffListComponent }  from './components/staff-list.component'

import { StaffService } from './components/staff.service'

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ 
    AppComponent, 
    UserComponent, 
    StaffFormComponent,
    StaffListComponent 
  ],
  providers: [
    StaffService
  ],  
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
 
การกำหนดค่าใน @NgModule ข้างต้น ก็จะทำให้ service class ของเรา เป็น Injector ที่สามารถ
นำไปใช้งานได้ทุกที่ภายใน App ของเรา
    แต่เนื่องจาก StaffService ของเรานั้น ใช้งานเฉพาะในส่วนของ StaffListComponent เท่านั้น
ดังนั้น การกำหนดค่า provider ใน StaffListComponent จึงเป็นวิธีที่เหมาะสม ในการใช้งาน
ตัว Injector ตัวนี้ มากกว่าการกำหนดใน @NgModule 
    เราจึงเลือกวิธีที่ 2 ในการกำหนด provider สำหรับกรณีตัวอย่าง
 
 

2. การกำหนด provider ใน App Component

    การขึ้นทะเบียน provider ใน Component มีวิธีการกำหนดแบบเดียวกับการกำหนดใน @NgModule
โดยการกำหนดค่าข้อมูลแบบ Array เข้าไปใน providers metadata ของ @Component ซึ่งใน
ตัวอย่างของเราคือ StaffListComponent ในไฟล์ staff-list.component.ts โดยสามารถกำหนด
ได้ดังนี้
 

ไฟล์ staff-list.component.ts

 

 
 
import { Component } from '@angular/core'

import { Staff } from './staff'
import { StaffService } from './staff.service'

@Component({
  moduleId: module.id,    
  providers:[StaffService],
  selector: 'staff-list',
  templateUrl: `./staff-list.component.html`,
})
export class StaffListComponent {

}
 
การกำหนดใน @Component หรือใน Application Component นั้น จะทำให้ service class
เป็น Injector ที่สามารถเรียกใช้งานได้เฉพาะภายใน Component นั้นรวมถึง Component ลูก
ที่อยู่ภายใน Component น้้นด้วย
 
    หมายเหตุ: ก่อนกำหนด service class ลงใน providers metadata ทุกครั้งเราต้องอย่าลืม
import service class นั้นๆ เข้ามาก่อนเสมอ ทั้งในกรณีกำหนดใน @NgModule หรือ @Component
 
ตามที่เราได้บอกไว้แล้วว่า เราจะใช้วิธีการกำหนด providers ใน @Component ต่อไปเราจะมา
ดูรายละเอียดเพิ่มเติม ในการเตรียมการสำหรับนำ Injector มาใช้งานใน App Component มีวิธี
การและการทำงานอย่างไร


 

การเตรียม StaffListComponent สำหรับใช้งาน Injector 

    ตามรูปแบบการใช้งาน DI ที่เราได้ศึกษามา    StaffListComponent จะต้องทำการนำเข้า
StaffService โดยเรียกใช้งาน service ภายในฟังก์ชั่น constructor()  
เรามาดูโค้ดเต็มของไฟล์ staff-list.component.ts ทั้งกรณีมีการใช้งาน DI หรือเรียกใช้ service
และกรณีไม่ได้ใช้งาน DI
 

ไฟล์ staff-list.component.ts

 

import { Component } from '@angular/core'

import { Staff } from './staff'
import { StaffService } from './staff.service'

@Component({
  moduleId: module.id,    
  providers:[StaffService],
  selector: 'staff-list',
  templateUrl: `./staff-list.component.html`,
})
export class StaffListComponent {
  staffs:Staff[];

  constructor(staffService:StaffService){
    this.staffs = staffService.getStaffs();
  }
}

import { Component } from '@angular/core'

import { STAFFS } from './mock-staffs'

@Component({
  moduleId: module.id,    
  selector: 'staff-list',
  templateUrl: `./staff-list.component.html`,
})
export class StaffListComponent {
    staffs = STAFFS;
}


 
 
 
 
ให้เราสังเกตให้ส่วนของการกำหนด parameter ใน constructor() จะพบว่า 
parameter ที่เรากำหนดชื่อว่า staffService มี type หรือประเภทตัวแปรเป็น Service class 
ที่ชื่อ StaffService ซึ่งการที่เราสามารถใช้งาน StaffService ได้ ก็เพราะว่าเรามีการขึ้น
ทะเบียน provider โดยการกำหนดใน @Component providers metadata 
    ดังนั้น ตัวแปร staffService จึงเป็นตัวแปรที่อ้างอิงถึง Injector ที่ชื่อ StaffService
โดยเมื่อใดที่ StaffListComponent มีการใช้งานเกิดขึ้น constructor() ก็จะทำการนำเข้า
StaffService เข้ามาใช้งานใน Component ทันที หลังจากนั้นใน constructor() ยังสั่งให้
staffService ทำคำสั่ง getStaffs() เพื่อดึงข้อมูลรายชื่อ staff มาไว้ในตัวแปร staffs
ดังตัวอย่างโค้ดในส่วนของบรรทัด
 
this.staffs = staffService.getStaffs();
 
เตือนความจำ: constructor() คือฟังก์ชั่นหรือคำสั่งที่ทำงานทันทีเมื่อ Component นั้นๆ
มีการใช้งาน โดยที่เราไม่ต้องเรียกใช้คำสั่ง เหมือนกรณีฟังก์ชั่นหรือคำสั่งอื่นๆ
 
ข้อสังเกต: การกำหนด parameter ใน construtor() ของ TypeScript จะเป็นกำหนด property
ของ Component ไปด้วยในตัว อย่างที่เราเคยเห็นในการกำหนดในไฟล์ staff.ts ดังนี้
 
export class Staff {

  constructor(
    public id: number,
    public name: string,
    public department: string,
    public age?: number
  ) {  }

}
 
ทีนี้เราได้เข้าใจวิธีการใช้งาน DI รวมถึงวิธีการขึ้นทะเบียน provider ไปแล้ว เนื้อหาต่อไป
เราจะยังอยู่เกี่ยวกับ DI จะลงไปดูรายละเอียดอื่นๆ เพิ่มเติม จะเป็นอะไนนั้นรอติดตามตอนหน้า
 


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง









URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ