วิธีป้องกันไม่ให้ผู้ให้บริการเชิงมุมของคุณจบลงด้วยหัวฉีดที่ไม่ถูกต้อง

ใน Angular การลงทะเบียนผู้ให้บริการการฉีดการพึ่งพาโดยใช้ฟังก์ชันธรรมดาถือเป็นเรื่องปกติ อย่างไรก็ตาม เมื่อสร้างฟังก์ชันดังกล่าว สิ่งสำคัญคือต้องคำนึงถึงจุดประสงค์การใช้งาน

ตัวอย่างเช่น Angular มีฟังก์ชันหลายอย่างเช่นprovideHttpClient(), provideRouter()และwithDomHydration()ที่ลงทะเบียนผู้ให้บริการภายใต้ประทุน ฟังก์ชันเหล่านี้ได้รับการออกแบบเพื่อใช้ในหัวฉีดสภาพแวดล้อมแทนที่จะใช้ในส่วนประกอบหรือไดเรกทีฟอินเจ็กเตอร์

สมมติว่าคุณกำลังสร้างฟังก์ชันprovideSvgIconsConfig()ที่ต้องการลงทะเบียนผู้ให้บริการสำหรับการกำหนดค่าไอคอน SVG หากคุณใช้ฟังก์ชันนี้ในคอมโพเนนต์หรือไดเร็กทีฟอินเจ็กเตอร์ คุณจะไม่เห็นข้อผิดพลาดใดๆ อย่างไรก็ตาม สิ่งนี้สามารถนำไปสู่พฤติกรรมที่ไม่คาดคิดหรือข้อผิดพลาดในภายหลัง

export function provideSvgIconsConfig(config: Partial<SVG_CONFIG>) {
  return {
    provide: SVG_ICONS_CONFIG,
    useValue: config,
  };
}

      
                

                    
                    
                
            

เพื่อแสดงสิ่งนี้ ให้พิจารณาการใช้งานที่ปรับปรุงแล้วของprovideSvgIconsConfigusing makeEnvironmentProviders:

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

export function provideSvgIconsConfig(config: Partial<SVG_CONFIG>) {
  return makeEnvironmentProviders([
    {
      provide: SVG_ICONS_CONFIG,
      useValue: config,
    },
  ]);
}

ติดตามฉันบนMediumหรือTwitterเพื่ออ่านเพิ่มเติมเกี่ยวกับ Angular และ JS!