การใช้งาน provider ที่ไม่ใช่ service class ใน Angular

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

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

ดูแล้ว 7,786 ครั้ง


เนื้อหาในตอนต่อไปนี้ เราจะพูดถึงกรณีที่เราจะต้องทำการนำเข้า service ที่ไม่ได้
เป็น class มากำหนดใน provider เช่น เป็น string function หรือ object 
บทความต่อเนื่องจากตอนที่แล้ว
 
(ทบทวนบทความที่)
การเรียกใช้งาน service ในอีก service และรู้จักกับ provider เพิ่มเติม 
 
 

การกำหนด และใช้งาน Value provider

 
สมมติเรา export ค่าเป็น object ชื่อ objLogger เพิ่มลงไปในไฟล์ logger.service.ts
ด้วยโค้ดตัวอย่างดังนี้
 
export let objLogger = {
  logs: ["ดึงข้อมูลโดยใช้ผ่าน 'useValue' "],
  log: () => {
      console.log("use method in objLogger");
  }
};
 
ใน objLogger ก็จะมี property 2 ตัวคือ logs มีค่าเป็น ชุดข้อมูล Array
และอีกอันคือ log มีค่าเป็นฟังก์ชั่น  รูปแบบ () => {} เป็นรูปแบบการเขียนฟังก์ชั่น
ใหม่ใน ES6 หรือเรียกรูปแบบฟังก์ชั่นนี้ว่า arrow function 
รูปแบบ arrow function ใน ES6 หรือ JavaScript เวอร์ชั่นใหม่
 
    () => { ... } // ไม่มี parameter
     x => { ... } // มี 1 parameter
(x, y) => { ... } // มี parameter มากกว่า 1
 
ตัวอย่างการกำหนดค่าในวงเล็บปีกกา:
 
x => { return x * x }  // กำหนดแบบ block กรณีรูปแบบนี้ 
x => x * x  // สามารถแทนด้วยรูปแบบนี้แทน
 
รูปแบบเต็มที่ใช้ใน ES5
 
function(x){
    return x * x;
}
 
 
เรากลับมาที่โค้ดเราต่อ
log ฟังก์ชั่น จะทำงานแสดงข้อความทาง console
 
ไฟล์ logger.service.ts ปรับใหม่ ตัด NewLogger และ EvenBetterLogger ออก

ไฟล์ logger.service.ts



 
 
import { Injectable } from '@angular/core';
import { Optional } from '@angular/core';
import { BestStaffService } from './components/beststaff.service';

@Injectable()
export class Logger {

    logs: string[] = []; // กำหนดตัวแปร array แบบ string
    log(message: string) { // ฟังก์ชั่น log()
        this.logs.push(message); // รับค่าข้อความและเพิ่มไปใน array
        console.log(message); // แสดงข้อความใน console
    }

}

export let objLogger = {
  logs: ["ดึงข้อมูลโดยใช้ผ่าน 'useValue' "],
  log: () => {
      console.log("use method in objLogger");
  }
};
 
จากนั้นให้เราทำการกำหนดค่าใน provider ในไฟล์ app.module.ts ดังนี้
 
ไฟล์ app.module.ts ตัดโค้ดตัวอย่างมาเฉพาะในส่วนของ providers

ไฟล์ app.module.ts

 

 
 
providers:[
  BestStaffService,
  { provide: Logger, useValue: objLogger }
],
 
จากรูปโค้ดตัวอย่างเราตัด  NewLogger และ EvenBetterLogger ออก แล้ว import objLogger
จากไฟล์ logger.service.ts มาใช้ จากนั้นส่วนของโค้ดการกำหนด providers เรามีการใช้
useValue property เพื่อกำหนดค่า objLogger ถูกอ้างอิงด้วยตัวแปร provider ที่ชื่อ Logger
เราเรียก Logger ที่ใช้ค่าจาก Object หรือจากตัวแปร ว่า Value provider
 
ทดสอบรันดูผลลัพธ์ (อย่าลืมว่าไฟล์ staff.service.ts เรายังมีการเรียกใช้งานคำสั่ง log() )
 


 
 
จะเห็นว่าตัวแปรอ้างอิง Logger เรียกใช้คำสั่ง log() ในไฟล์ staff.service.ts ตามที่เราเคยบอกไว้แล้ว
และเมื่อตัวแปร Logger อ้างอิงค่าจาก objLogger Object จะทำให้ Logger ไปทำงานคำสั่ง log()
ใน objLogger แทน เพราะมีการกำหนดให้ Logger ใช้ค่าจาก objLogger Object ตามที่เราได้
กำหนดไปแล้วในค่า useValue
 


 

การกำหนด และใช้งาน Factory provider

 
ในบางครั้งเราต้องการค่าที่มีการเปลี่ยนแปลงตามข้อมูลที่มี สมมติว่า service ที่นำเข้า  ไม่สามารถเข้า
ถึงข้อมูลต้นทางอย่างอิสระได้โดยตรง รูปแบบสถานการณ์ในลักษณะนี้ เราจะใช้ factory provider เข้ามาจัดการ
ลองมาดูข้อมูลตัวอย่าง 
 
สมมติ เราต้องการจำกัดการแสดงข้อมูลของ staff ตามเงื่อนของ user หรือผู้ใช้งาน เช่น
ถ้า user คนนี้เข้ามาใช้งาน ให้แสดงเฉพาะ staff ที่มีอายุมากกว่าหรือเท่ากับ 30 ปี เป็นต้น
 
 
ให้เราสร้างไฟล์ user.service.ts ไว้ในโฟลเดอร์ components ดังนี้
 

ไฟล์ user.service.ts

 

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

// ไม่กำหนด @Injectable() ตรงนี้เพราะเราไม่ได้จะใช้  User class เป็น service
export class User {
  constructor(
    public name: string,
    public isAuthorized = false) { }
}

// สร้าง user สมมติขึ้นมาสองคน
let Manop = new User('Manop', true);
let Jubjang = new User('Jubjang', false);

@Injectable()
export class UserService {
  user = Jubjang;  // กำหนด user เริ่มต้นเป็น Jubjang

  // คำสั่งสลับ user อย่างง่าย
  getNewUser() {
    // ทุกครั้งที่มีการเรียกคำสั่งนี้ทำงาน ค่า user จะสลับไปมา
    return this.user = this.user === Jubjang ? Manop : Jubjang;
  }
}
 
จากไฟล์ user.service.ts เราได้สร้าง user class โดยไม่ได้กำหนด @Injectable() เข้าไป
ทั้งนี้เพราะไม่ได้จะใช้งาน user class เป็น service แต่จะใช้เป็น Object class กำหนดคุณลักษณะ
ของ user ว่ามีอะไรบ้าง ในที่นี้ก็จะมี name กับ isAuthorized คือชื่อกับสิทธิการเข้าใช้งาน
หรือสิทธิการได้รับอนุญาติ
    จากนั้นเราก็สร้าง user จำลองขึ้นมาสองค้น โดยกำหนดค่า parameter ตามโครงสร้างของ 
Object user จากตัวอย่าง เราให้ Manop มีสิทธิการเข้าถึงข้อมูล เป็น true ส่วน Jubjang เป็น false
    และใน UserService class เรากำหนดตัวแปร user เริ่มต้นเป็น Jubjang และมีคำสั่ง getNewUser()
ทำหน้าทีในการสลับ user เพื่อใช้ทดสอบค่าที่จะถูกส่งเข้าไปใช้งานใน factory provider 
 
เป้าหมายของเราคือ เราต้องการให้ StaffService ซ่อนหรือแสดงรายชื่อ staff ตามเงื่อนไขของ user
เช่น user ที่มี isAuthorized เป็น true จะไม่ถูกจำกัดสิทธิสามารถดูรายชื่อ staff ได้ทั้งหมด
ส่วน user ที่มี isAuthorized เป็น false จะถูกจำกัดสิทธิ ในที่นี้เราจะกำหนดให้สามารถดูเฉพาะรายชื่อ
staff ที่มีอายุไม่ถึง 30 ปีเท่านั้น
 
สถานการณ์คือ StaffService จำเป็นต้องทราบข้อเท็จจริงของ user ว่า user นั้นๆ ถูกจำกัดสิทธิหรือไม่
โดยค่าสิทธิของ user นั้นสามารถเปลี่ยนแปลงเช่น มีการล็อกอิน user ใหม่เข้ามา
แต่ปัญหาคือ เราไม่สามารถนำเข้า UserService เข้าไปใน StaffService ได้ ทำไห้ StaffService 
เข้าไม่ถึงข้อมูลของ user เพื่อดูว่า user ไหนถูกจำกัดสิทธิหรือไม่ถูกจำกัดสิทธิ 
 
ดังนั้น StaffService จะใช้ตัวแปรค่าที่เป็น boolean ที่เป็น true หรือ false แทน ในการใช้เป็นเงื่อนไข
การจำกัดสิทธิของ user ที่จะถูกส่งค่าเข้ามา ปรับไฟล์ staff.service.ts ดังนี้
 

ไฟล์ staff.service.ts

 

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

import { STAFFS }     from './mock-staffs';
import { Logger }     from '../logger.service'

@Injectable()
export class StaffService {

  constructor(
    private logger: Logger,
    private isAuthorized:boolean) {  }

  getStaffs() { 
    let auth = this.isAuthorized ? 'ไม่ถูกจำกัดสิทธิ ' : 'ถูกจำกัดสิทธิ';
    this.logger.log(`เรียกดูข้อมูลจากผู้ใช้ที่ ${auth} `);
    return STAFFS.filter(staff => this.isAuthorized || !(staff.age>=30));    
  }
  
}
 
สังเกตว่า StaffService มีการกำหนดตัวแปร 2 ตัวไว้ใน constructor()
ตัวแปร loggger อ้างอิง Logger class นำเข้ามาเพื่อใช้งานคำสั่ง log() แสดงข้อมูลทาง console
และตัวแปร isAuthorized เป็นตัวแปร boolean เป็นค่าของสิทธิของ user เป็น true หรือ false
    ต่อมาในคำสั่ง getStaffs()  มีการกำหนดตัวแปร auth (การกำหนดตัวแปรโดยใช้ let หมายถึง
ตัวแปรนั้นๆ จะใช้งานได้เฉพาะใน block นั้น ๆ ในตัวอย่างคือใช้ได้เฉพาะใน คำสั่ง getStaffs() )
ตัวแปร auth กำหนดค่ามาเก็บข้อความ string ที่มีเงื่อนไขว่าถ้า ตัวแปร isAuthorized ที่ส่งเข้ามา
เป็น true ให้มีค่าเป็น 'ไม่ถูกจำกัดสิทธิ ' และถ้ามีค่าเป็น false ให้เป็น 'ถูกจำกัดสิทธิ' 
บรรทัดต่อมาให้ทำการแสดงข้อความออกทาง console โดยเรียกใช้คำสั่งจาก Logger class ผ่าน
ตัวแปร logger ให้ทำงานตามคำสั่ง 
 
this.logger.log(`เรียกดูข้อมูลจากผู้ใช้ที่ ${auth} `);
 
ตัวแปรค่า auth กรณีส่งเข้าไป string ให้ใช้รูปแบบ ${xxxxx} 
 
บรรทัดสุดท้ายในคำสั่ง getStaffs() เป็นการกำหนดให้ แสดงรายชื่อ staff ตามเงื่อนไข ที่เราต้องการ
ซึ่งในที่นี้กำหนดว่าถ้า isAuthorized เป็น true ก็แสดงรายชื่อทั้งหมด หรือ ถ้า isAuthorized เป็น false
ให้แสดงราชื่อ เฉพาะ staff ที่มีอายุน้อยกว่า 30 ปี
 
!(staff.age>=30) // หมายถึง ไม่ใช่ staff ที่มีอายุมากกว่า 30 ปี
// มีค่านเช่นเดียวกับ
staff.age<30  // หมายถึง staff ที่อายุน้อยกว่า 30 ปี
 
เรามาทำความคุ้นเคยกับ JavaScrpt เพิ่มเติม
 
STAFFS.filter(staff => this.isAuthorized || !(staff.age>=30));    
 
ตัวแปร STAFFS เป้นข้อมูล Array ของ Object ใช้ฟังก์ชั่นที่ชื่อ filter() ในการกรองรายการ Array ที่ต้องการ
ยกตัวอย่างเช่น 
 
// ฟังก์ชั่นคืนอค่ารายการที่มากกว่าหรือเท่ากับ 10
function isBigEnough(value) {
  return value >= 10;
}

// ตัวแปร Array ที่ชื่อ filtered ใช้ฟังก์ชั่น filter() วนลูปส่งค่าเข้าไปในฟังก์ชั่น isBigEnough
// แล้วคืนค่ากลับมาเฉพาะกรณีค่าเป็นจริงตามเงื่อนไขฟังก์ชั่น isBigEnough คือต้องมีค่า >=10
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// ผลลัพธ์ค่าของตัวแปร filtered ก็จะได้เป็นดังนี้
// filtered มีค่าเท่ากับ [12, 130, 44]  
 
และจากที่เราพอรู้ไปบ้างแล้วเกี่ยวกับฟังก์ชั่น ใน ES6 รูปแบบใหม่
 
staff => this.isAuthorized || !(staff.age>=30) 
 
จึงหมายถึง
 
function(staff){
	return this.isAuthorized || !(staff.age>=30);
}
 
คำสั่ง 
 
STAFFS.filter(
	function(staff){
		return this.isAuthorized || !(staff.age>=30);
	}
)
 
จึงหมายถึง ตัวแปร STAFFS ส่งค่า Object ของแต่ละ Array เข้าไปในฟังก์ชั่น ในชื่อ staff
วนลูปทำคำสั่ง ส่งค่าคืนกลับมา เมื่อ ค่า this.isAuthorized || !(staff.age>=30) มีค่าเป็น true
โดยเงื่อนไข || จะเป็น true เมื่อค่าใด ค่าหนึ่งเป็น true
ดังนั้นถ้าเป็น user ที่มี isAuthorized เป็น true ค่าก็จะเป็น true ทั้งหมด
โดยไม่ต้องสนใจอายุของ staff 
 
this.isAuthorized || !(staff.age>=30)
// true || !(staff.age>=30)
 
ค่าเป็น true ทั้งหมดก็หมายถึง ส่งรายชื่อ staff ทั้งหมดมาแสดง
 
แต่ถ้าสมมติว่า user มี isAuthorized เป็น false ค่าจะเป็น true ก็ต่อเมือ !(staff.age>=30) เป็น true
 
this.isAuthorized || !(staff.age>=30)
// false || !(staff.age>=30)
// !(staff.age>=30) ต้องเป็น true จริงจะคืนค่ากลับมา ดังนั้น
// staff ที่ไม่ได้มีอายุมากกว่าหรือเท่ากับ 30 จะเป็นค่า true นั่นคือ แสดงเฉพาะ staff ที่อายุน้อยกว่า 30
 
ถือเป็นการทบทวนเกี่ยวกับเงื่อนไข "หรือ"( || ) เป็น true มื่อมีค่าใดค่าหนึ่งเป็น true
 
 
กลับมาต่อที่บทความ จากโค้ดไฟล์ staff.service.ts เราสามารถนำเข้า Loggger class ได้ แต่เราไม่สามารถนำเข้า
ค่าของตัวแปร isAuthorized ซึ่งเป็น boolean ได้ 
    ดังนั้นเราต้องทำการสร้างตัวแปรอ้างอิงของ StaffService ขึ้นมาใหม่ ทีมีฟังก์ชั่นในการจัดการกับค่า 
isAuthorized ซึ่งวิธีการนี้เราเรียกว่าการใช้งาน factory provider หรือการสร้าง provider ที่เปลี่ยนแปลง
ค่าไปตามเงื่อนไขหรือข้อมูลที่กำหนด
 
ให้เราสร้างไฟล์ชื่อ staff.service.provider.ts ไว้ในโฟลเดอร์ components ดังนี้
 

ไฟล์ staff.service.provider.ts

 
 

import { StaffService } from './staff.service';
import { Logger }      from '../logger.service';
import { UserService } from './user.service';

let staffServiceFactory = (logger: Logger, userService: UserService) => {
  return new StaffService(logger, userService.user.isAuthorized);
};

export let staffServiceProvider =  { 
    provide: StaffService,
    useFactory: staffServiceFactory,
    deps: [Logger, UserService]
};
 
ไฟล์ staff.service.provider.ts ไม่ใช่ไฟล์ class เป้นไฟล์ที่สร้างตัวแปร Object ที่ชื่อ staffServiceProvider
เพื่อไปใช้งานเป็น provider object สังเกตว่ารูปแบบจะเหมือนกับการกำหนด provider แบบ Object
 
{ provide: StaffService,useFactory: staffServiceFactory,deps: [Logger, UserService] }
 
แต่รูปแบบที่แตกต่างคือ มีการใช้ useFactory และ deps โดย
useFactory เป็น factory fucntion ที่ทำการสร้างตัวแปรอ้างอิง StaffService ใหม่ตามเงื่อนไขค่า
isAuthorized 
deps เป็น Array ของ class ที่จำเป็นต้องใช้งานร่วม ในตัวอย่างใช้ Logger และ UserService
 
เรามาดูว่า ทำไมถึงใช้ชื่อไฟล์ว่า staff.service.provider.ts ซึ่งคล้ายๆ กับ staff.service.ts ทั้งนี้ก็เพราะ
เราจะสร้างตัวแปรอ้างอิงของ StaffService ทำให้เหมือนได้ StaffService class ใหม่ที่มีค่าเปลี่ยนแปร
ตามเงื่อนไขค่า isAuthorized 
โดยไฟล์ staff.service.provider.ts มีการ import class ต่างๆ ที่จำเป็นเข้ามาใช้งาน
จากนั้นทำการสร้างตัวแปรชื่อ staffServiceFactory เป็นฟังก์ชั่น รูปแบบ ES6
 
let staffServiceFactory = (logger: Logger, userService: UserService) => {
  return new StaffService(logger, userService.user.isAuthorized);
};
 
มาจาก
 
let staffServiceFactory = function(logger: Logger, userService: UserService){
  return new StaffService(logger, userService.user.isAuthorized);
};
 
ฟังก์ชั่นนี้เรียกว่า factory function รองรับฃ parameter 2 ตัว ที่เป็น Logger และ UserService
โดยเมื่อรับค่าเข้าไปในฟังก์ชั่นแล้ว เราก็สามารถที่จะนำค่า userService.user.isAuthorized
ซึ่งเป็นค่าที่ต้องการ ในการใช้กำหนดสิทธิผู้ใช้ เข้าไปใน StaffService parameter ใน constructor()
ฟังก์ชั่นที่เราได้กำหนดไปแล้วในไฟล์ staff.service.ts  จากนั้นก็ return ค่าออกมา
    นั่นคือ factory function เสมือนสร้าง class StaffService ขึ้นมาใหม่ตามเงื่อนไขที่เรากำหนด
ซึ่งพอเราได้ class มาแล้ว เราก็สามารถนำไปใช้ในการขึ้นทะเบียน provider ได้
 
export let staffServiceProvider =  { 
    provide: StaffService,
    useFactory: staffServiceFactory,
    deps: [Logger, UserService]
};
 
ดังนั้นส่วนนี้ก็คือได้ Provider Object ที่มีชื่อตัวแปรอ้างอิงสำหรับเรียกใช้ชื่อว่า StaffService
ใช้ class ที่ได้จากฟังก์ชั่น staffServiceFactory ที่กำหนดด้วย useFactory
และนำเข้า class Logger , UserService มาใช้งานร่วม
 
ต่อไปเราจะมาทำการขึ้นทะเบียน Provider ซึ่งในที่นี้เราจะไม่ได้กำหนดในไฟล์ app.module.ts 
แต่เราจะใช้เฉพาะใน @Component แทน แต่ก่อนอื่นให้เราแก้ไขไฟล์ app.component.ts
ใหม่เป็นดังนี้
 

ไฟล์ app.component.ts 

 
 

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

@Component({
  selector: 'my-app',
  template: `<staff></staff>`
})
export class AppComponent  { 

}
 
โดยเปลี่ยนส่วนของ template จากเดิม
 
template: `<staff-list></staff-list>`
 
ซึ่งเป็น 
 
template: `<staff></staff>`
 
ทั้งนี้เพื่อเราจะได้สร้างส่วนจำลองการทำงานให้เห็นภาพ เพิ่มขึ้น เช่น มีปุ่ม
สมมติการล็อกอินของ user มีส่วนของการแสดง รายชื่อ staff ตามเงื่อนไข เป็นต้น
 
จากนั้นให้สร้างไฟล์ staff.component.ts ไว้ในโฟลเดอร์ components ดังนี้
 

ไฟล์ staff.component.ts

 
 

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'staff',
  template: `
  <br>
  <div class="container">
    <button (click)="nextUser()" class="btn btn-sm btn-success">
    Next User</button>
    </div>
  <staff-list  id="authorized" *ngIf="isAuthorized"></staff-list>
  <staff-list  id="unauthorized" *ngIf="!isAuthorized"></staff-list>
  `,
})
export class StaffComponent  { 

    constructor(private userService:UserService){}
       
    get isAuthorized() { return this.user.isAuthorized; }
    nextUser() {
       this.userService.getNewUser(); 
    }
    get user() { return this.userService.user; }  
}
 
 
ไฟล์ staff.component.ts มีการ import UserService มาใช้งาน กำหนด selector เป็น staff
คือให้ไปแสดงใน tag <staff></staff> ที่เรากำหนดในไฟล์ app.component.ts
ในส่วนของ StaffComponent class มีการนำเข้า UserService เข้ามาผ่าน constructor() ฟังก์ชั่น
 
มีการคืนค่า  isAuthorized ของ user ปัจจุบันด้วยคำสั่ง 
 
get isAuthorized() { return this.user.isAuthorized; }
 
สังเกตคำสั่ง get เป็นคำสั่งใน TypeScript ในการคืนค่าของฟังก์ชั่นออกมาทันทีเมื่อ
StaffComponent class มีการเรียกใช้งาน โดยไม่ต้องเรียกใช้ฟังก์ชั่น กล่าวคือ
ถ้าเราอ้างอิงตัวแปร isAuthorized ก็จะหมายถึงค่าจากฟังก์ขั่น โดยที่เราไม่ต้องใช้คำสั่งว่า isAuthorized()
เช่นเดียวกับคำสั่ง 
 
get user() { return this.userService.user; }  
 
การอ้างอิงค่าตัวแปร user จะหมายถึงค่าของฟังก์ชั่น user() ซึ่งจากโค้ดก็คือ คืนค่าเป็น User Object ณ 
ขณะนั้น
 
ส่วนคำสั่ง
 
nextUser() {
   this.userService.getNewUser(); 
}
 
เป็นคำสั่งสำหรับสลับ user ที่เราได้กล่าวไปแล้วในตอนต้น โดยให้ UserService ทำคำสั่ง getNewUser()
อีกที คำสั่ง nextUser() นี้เราไม่ได้กำหนด get นำหน้า นั้นหมายถึงคำสั่งนี้ จะไม่ได้ทำงานทันที
แต่จะทำงานเมื่อเรามีการเรียกใช้ ซึ่งจะเห็นว่าใน template เราได้สร้างปุ่มขึ้นมา
และกำหนดให้เมื่อคลิกที่ปุ่ม ให้ทำการการทำคำสั่งนี้ เพื่อสลับ user
 
นอกจากนั้นเราได้กำหนดการแสดง tag <staff-list> ตามเงื่อนไข ค่าตัวแปร isAuthorized ด้วย
*ngIf directive 
 
  <staff-list  id="authorized" *ngIf="isAuthorized"></staff-list>
  <staff-list  id="unauthorized" *ngIf="!isAuthorized"></staff-list>
 
โดยถ้าค่า isAuthorized เป็น true ให้ <staff-list> ที่มี id เท่ากับ "authorized"  แสดง
เป็น false ให้ซ่อน 
กลับกัน <staff-list> ที่มี id เท่ากับ "unauthorized" ให้ทำงานตรงกันข้าม แสดงเมื่อ
ค่า isAuthorized เป็น false และซ่อนเมื่อ isAuthorized เป็น true
ซึ่งค่า isAuthorized จะมาจากคำสั่ง get isAuthorized() { return this.user.isAuthorized; }
ค่าจะเปลี่ยนแปลงเมื่อมีการกดปุ่มทำคำสั่ง nextUser()
 
ต่อไปเราจะไปดูที่ไฟล์ staff-list.component.ts เป็นไฟล์ที่แสดงรายชื่อ staff
และเราจะกำหนดให้เรียกใช้งาน factory provider ในนี้
 

ไฟล์ staff-list.component.ts

 
 

import { Component } from '@angular/core'

import { Staff } from './staff'
import { StaffService } from './staff.service'
import { staffServiceProvider } from './staff.service.provider';

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

}
 
เรามีการ import provider object ที่ชือ staffServiceProvider เข้ามา แล้วนำมากำหนด
provider ใน @Component ของ StaffListComponent โดย provider จะทำงานทุกครั้ง
ที่ StaffListComponent ถูกเรียกใช้งาน ซึ่งก็คือ ถ้า <staff-list> ที่อยู่ในไฟล์ staff.component.ts
ตัวไหนแสดง StaffListComponent ก็จะถูกเรียกใช้งานพร้อมกับมีการใช้งาน provider ที่ import
เข้ามาด้วย 
    โดยเมื่อ StaffListComponent ถูกเรียกใช้งาน ก็จะทำงานคำสั่งใน constructor ทันทีซึ่งก็คือ
ใช้ StaffService class ผ่านตัวแปร staffService ทำงานคำสั่ง getStaffs() และเนื่องด้วยมีการใช้งาน
staffServiceProvider ทำให้ StaffService class เป้นตัวแปรที่ถูกสร้างใหม่โดยมีการส่งค่า isAuthorized
ที่มีการเปลี่ยนแปลงค่าตาม user ปัจจุบันในขณะนั้น เข้าไป ดังนั้น คำสั่ง getStaffs() ก็จะทำงาน
ตามเงื่อนไขค่า isAuthorized คือแสดงรายการ staff ทั้งหมดถ้า isAuthorized เป็น true และ
แสดงรายการเฉพาะ staff ที่มีอายุน้อยกว่า 30 ปี ถ้า isAuthorized เป็น false
 
ก่อนทดสอบผลลัพธ์ ให้เราไปทำการกำหนดค่าเพิ่มเติมในไฟล์ app.module.ts เนื่องจากเรามีการ
สร้าง component ขึ้นมาใหม่ชื่อ StaffComponent และมีการใช้นำเข้า UserService ด้วย 
ให้แก้ไขไฟล์ 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 { StaffComponent } from './components/staff.component';
import { StaffFormComponent }  from './components/staff-form.component';
import { StaffListComponent }  from './components/staff-list.component';

import { Logger,objLogger } from './logger.service';
import { UserService } from './components/user.service';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ 
    AppComponent, 
    UserComponent, 
    StaffComponent,
    StaffFormComponent,
    StaffListComponent 
  ],
  providers:[
    UserService,
    { provide: Logger, useClass: Logger }
  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
 
ให้เรา import StaffComponent  และประการศใช้งาน class ใน declarations
และก็ import UserService พร้อมกับขึ้นทะเบียน provider ใน providers
 
จากนั้นทดสอบรัน App จะได้เป็น
 
 

 
 
ค่าเริ่มต้นเรากำหนด user เป็น Jubjang ซึ่งมีค่า isAuthorized เป็น false ทำให้แสดงรายชื่อ staff 
เฉพาะที่มีอายุน้อยกวา 30 ปี จากนั้นพอเรากดที่ปุ่ม Next User เพื่อสลับ user ใหม่ ซึ่งจะสลับ
ไปเป็น Manup มี isAuthorized เป็น true ทำให้แสดงรายชื่อ staff ทั้งหมด ดังรูป
 
 


 
 
 
 

สัญลักษณะของ Dependency injection

 
 Token หรือสัญลักษณะที่ระบุว่าสิ่งนั้นเป็น DI เราจะได้พบตลอดเมื่อมีการขึ้นทะเบียน provider โดยใน
ตัวอย่างที่ผ่านๆ มา ค่าของ provide จะเป็นชื่ออ้างอิงชื่อของ class ที่มีการใช้งาน
 
{ provide: Logger, useClass: Logger }
 
สมมติส่วนของการขึ้นทะเบียน provider เราจะเห็นว่า 
provide ใช้คำว่า "Logger" ซึ่งเป็นชื่อของ class ที่เราใช้งาน ซึ่งเป็นสัญลักษณะของ DI 
หรือที่เรียกว่า Token DI
 
ดังนั้น เวลาที่เรามีการขึ้นทะเบียน provider โดยใช้ service ที่เป็น class การกำหนดค่า
Token หรือชื่อตัวแปรอ้างอิง จะสะดวกตรงที่เราสามารถใช้ชื่อของ class มาใช้ได้เลย
 
แล้วกรณีที่เราต้องการใช้เป็น provider ไม่ใช้ class เราจะกำหนดค่า Token อย่างไร
เรามาดูกันในหัวข้อถัดไป
 
 

การใช้งาน provider ที่ไม่ใช่ class

 
ถ้าสิ่งที่จะนำเข้ามาใช้งานไม่ใช่ class เช่น บางครั้งเราต้องการจะเข้าเป้น String ,Function หรือ Object
เช่น App ของเราต้องการกำหนดการตั้งค่า เป็นข้อมูลบางอย่างที่จะใช้งาน เช่น ชื่อหัวเรื่องของ App
หรือที่อยู่ ของ web API เป้าหมาย แต่ค่าเหล่านี้ ไม่ได้อยู่ในรูปแบบของ class 
ตัวอย่าง เช่น
 
export interface AppConfig {
  apiEndpoint: string;
  title: string;
}

export const STAFF_DI_CONFIG: AppConfig = {
  apiEndpoint: 'api.ninenik.com',
  title: 'Example DI'
};
 
 
เราประกาศตัวแปร STAFF_DI_CONFIG ด้วยคำสั่ง const ซึ่ง การใช้ const ต่างจากการใช้คำสั่ง let
ตรง const ใช้กำหนดตัวแปรที่เป็นค่าคงที่ เปลียนแปลงไม่ได้
แต่ let ใช้กำหนดตัวแปร ที่เปลี่ยนแปลงค่าได้
จากโค้ดเรากำหนดตัวแปร STAFF_DI_CONFIG เป็น Object มี type เป็น AppConfig
ซึ่งเราใช้ interface คำสั่งที่มีใน TypeScript ในการกำหนด type ของ property Object อีกที
 
แล้วทีนี้ เราจะใช้ Object ไปใช้ในการกำหนด provider ได้อย่างไร ตรงนี้ให้เราย้อนไปดูในเรื่องการ
ใช้งาน Value provider เราจะพบว่าเราสามารถกำหนด Object ใน provider โดยใช้กำหนดค่าโดยใช้
useValue ตัวอย่าง
 
 
 { provide: Logger, useValue: objLogger }
 
จะเห็นว่า objLogger เป็น Object ที่เรานำมาใช้งานในการกำหนด Provider โดยใช้ useValue
โดยกำหนด provide หรือค่า Token เป็น ชื่อ class ชื่อ Logger ซึ่งเป็น class ที่มี Object ที่ชื่อ objLogger 
อยู่ด้านใน

 ไฟล์ logger.service.ts 

 
import { Injectable } from '@angular/core';
import { Optional } from '@angular/core';
import { BestStaffService } from './components/beststaff.service';

@Injectable()
export class Logger {

    logs: string[] = []; // กำหนดตัวแปร array แบบ string
    log(message: string) { // ฟังก์ชั่น log()
        this.logs.push(message); // รับค่าข้อความและเพิ่มไปใน array
        console.log(message); // แสดงข้อความใน console
    }

}

export let objLogger = {
  logs: ["ดึงข้อมูลโดยใช้ผ่าน 'useValue' "],
  log: () => {
      console.log("use method in objLogger");
  }
};
 
ดังนั้นกรณีการกำหนดของ objLogger Object จึงยังเป็นการกำหนด provider ที่เป็น class 
ชื่อ Logger ที่มี Object objLogger อยู่ด้านใน 
 
แล้วกรณีที่ไม่ใช่ class เราจะใช้ค่าไหน กำหนดเป็นค่า Token ค่าไหน
 
// FAIL! เราไม่สามารถใช้ interface เป็น provider token
[{ provide: AppConfig, useValue: STAFF_DI_CONFIG })]
 
เนื่องจาก DI ไม่ได้เป็น class เราจึงไม่มีชื่อ class มากำหนด เป็น provider token ได้
วิธีแก้ปัญหา เราจะใช้ OpaqueToken class 
 
หมายเหตุ: Angular ที่เราใช้งาน เป็นเวอร์ชั่น 2 OpaqueToken ยังสามารถใช้งานได้ 
แต่ถ้าเป็นเวอร์ชั่น 4 ปัจุบัน OpaqueToken จะถูกยกเลิก และให้ใช้ InjectionToken แทน
ในที่นี้เราจะอธิบายยึดตาม OpaqueToken ไปก่อน
 
 

การแก้ปัญหา กำหนด Provider Token ด้วย OpaqueToken

 
วิธีแก้ปัญหาการกำหนด Token ให้กับ provider ที่ไม่ใช้ class ให้เราสร้างไฟล์ชื่อ app.config.ts
ไว้ในไฟล์เดอร์ app 
 

ไฟล์ app.config.ts

 
 

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

export let APP_CONFIG = new OpaqueToken('app.config');

export interface AppConfig {
  apiEndpoint: string;
  title: string;
}

export const STAFF_DI_CONFIG: AppConfig = {
  apiEndpoint: 'api.ninenik.com',
  title: 'Example DI'
};
 
เป็นการกำหนดให้ตัวแปร APP_CONFIG สามารถใช้กำหนดเป็น provider token ได้ 
โดยใช้คำส่ง new OpaqueToken('app.config');
app.config คือชื่อไฟล์ทีเรากำหนดให้ใช้งาน OpaqueToken
 
ต่อไปเราทำการใช้งาน Token ที่ได้โดยนำไปกำหนดในไฟล์ 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 { StaffComponent } from './components/staff.component';
import { StaffFormComponent }  from './components/staff-form.component';
import { StaffListComponent }  from './components/staff-list.component';

import { Logger,objLogger } from './logger.service';
import { UserService } from './components/user.service';
import { APP_CONFIG,STAFF_DI_CONFIG } from './app.config';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ 
    AppComponent, 
    UserComponent, 
    StaffComponent,
    StaffFormComponent,
    StaffListComponent 
  ],
  providers:[
    UserService,
    { provide: Logger, useClass: Logger },
    { provide: APP_CONFIG, useValue:STAFF_DI_CONFIG }
  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
 
ทำการ import APP_CONFIG และ STFF_DI_CONFIG เข้ามาใช้งาน 
จากนั้นเราสามารถใช้ APP_CONFIG เป็น provider token กำหนดค่าลงไปใน provide
และใช้ STFF_DI_CONFIG เป็น Object ค่าที่จะใช้งาน
 
ทดสอบเรียกใช้งานในไฟล์ staff.component.ts 
 

ไฟล์ staff.component.ts 

 
 

import { Component,Inject } from '@angular/core';
import { UserService } from './user.service';
import { APP_CONFIG,AppConfig } from '../app.config';

@Component({
  selector: 'staff',
  template: `
  <br><h1>{{title}}</h1>
  <div class="container">
    <button (click)="nextUser()" class="btn btn-sm btn-success">
    Next User</button>
    </div>
  <staff-list  id="authorized" *ngIf="isAuthorized"></staff-list>
  <staff-list  id="unauthorized" *ngIf="!isAuthorized"></staff-list>
  `,
})
export class StaffComponent  { 
    title:string;
    constructor(
        private userService:UserService,
        @Inject(APP_CONFIG) config: AppConfig
    ){
        this.title = config.title;
    }
       
    get isAuthorized() { return this.user.isAuthorized; }
    nextUser() {
       this.userService.getNewUser(); 
    }
    get user() { return this.userService.user; }  
}
 
เราทำการนำเข้ามาใช้งานใน constructor() กำหนดเป็น parameter ด้วยคำสั่ง
 
@Inject(APP_CONFIG) config: AppConfig
 
กำหนดตัวแปร config มี type ตาม interface AppConfig ใช้งานผ่าน APP_CONFIG provider token
จากนั้นเราก็สามารถอ้างอิงค่า ผ่านตัวแปร config อย่างตัวอย่าง
เรากำหนดให้ค่า title มีค่าเท่ากับ config.title จากนั้นทดสอบนำค่าไปแสงดงใน template
 
ผลลัพธ์ที่ได้จะเป็นดังนี้
 
 

 
 
ข้อความคำว่า Eample DI ซึ่งเป็นค่าที่เรากำหนดใน Object ที่ชื่อ STAFF_DI_CONFIG ถูกนำมาใช้งาน
ผ่านการกำหนดขึ้นทะเบียน provider ผ่านชื่อ APP_CONFIG provider token
 
ทั้งหมดคือเนื้อหาเกี่ยวกับ provider ที่เราได้ศึกษาเบื้องต้นถึงปานกลาง หากมีอัพเดทการใช้งานเพิ่ม
เติม จะนำมาอัพเดทต่อในบทความ ติดตามและแวะเข้ามาดูเป็นระยะๆ 
    ส่วนเนื้อหาต่อไป จะเป็นเกี่ยวกับอะไรนั้นรอติดตามต่อ

 


   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 31-03-2017


ตอนนี้แนะนำให้ปรับมาใช้ Angular เวอร์ชั่น 4 สามารถดาวน์โหลดไฟล์
ตั้งต้นสำหรับศึกษาและใช้งาน ได้ที่บทความ
 
เตรียมความพร้อมและเริ่มต้นศึกษา Angular 2 เบื้องต้น 
 
อยู่ท้ายสุดของบทความ 
 
สำหรับการใช้งาน OpaqueToken ที่ใช้สำหรับกำหนด Provider Token
จากบทความด้านบน ที่ได้เกริ่นไปแล้วว่า class นี้จะมีสถานะเป็น deprecated ใน Angular V4
และอาจจะยกเลิกใช้งานใน เวอร์ชั่นใหม่ๆ ต่อไป ให้เราเปลี่ยนมาใช้งาน InjectionToken
แทน โดยจากไฟล์ app.config.ts ด้านบน ให้เปลี่ยนคำว่า OpaqueToken เป็น InjectionToken
 

ไฟล์ app.config.ts

 
import { InjectionToken } from '@angular/core';
 
export let APP_CONFIG = new InjectionToken('app.config');
 
export interface AppConfig {
  apiEndpoint: string;
  title: string;
}
 
export const STAFF_DI_CONFIG: AppConfig = {
  apiEndpoint: 'api.ninenik.com',
  title: 'Example DI'
};
 
ส่วนการเรียกใช้งาน ตอนนำเข้าไปใน component ก็ยังเป็นเหมือนเดิม ตามตัวอย่างในไฟล์ 
staff.component.ts เลื่อนขึ้นไปดูด้านบน 
 
และสำหรับการปรับของ Amgular v4 เพิ่มเติมเกี่ยวกับ path ของ ไฟล์ css style และ html template
ให้อ่านอัพเดทเพิ่มเติมในตอนท้ายของบทความ 
 
เตรียมใช้งาน Template driven forms ใน Angular เบื้องต้น 


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







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









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





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

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


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


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







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