โทเค็นการฉีด
ฉีดค่าที่ไม่ใช่คลาสด้วยโทเค็น
โทเค็นการฉีด เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
โทเค็นการฉีด
การพึ่งพาไม่ได้เป็นคลาสทั้งหมด หากต้องการฉีดค่าอย่างออบเจ็กต์การกำหนดค่า สตริง หรืออินเทอร์เฟซ ให้ใช้ InjectionToken เป็นคีย์เฉพาะ
เหตุผลที่ใช้โทเค็น
สามารถใช้คลาสเป็นคีย์ DI ได้โดยตรง แต่อินเทอร์เฟซและค่าพื้นฐานทำไม่ได้ (อินเทอร์เฟซจะหายไปขณะทำงาน) InjectionToken จึงให้คีย์ที่มีชนิดข้อมูลชัดเจนและคงที่สำหรับกรณีเหล่านี้
การสร้างโทเค็น
สร้างโทเค็นด้วย new InjectionToken<T> โดยส่งคำอธิบายที่อ่านเข้าใจได้
import { InjectionToken } from '@angular/core';
export const API_URL = new InjectionToken<string>('API_URL');พารามิเตอร์ชนิดข้อมูล
พารามิเตอร์ชนิดข้อมูลทั่วไป (ในที่นี้คือ string) จะกำหนดชนิดข้อมูลให้โทเค็น ทำให้ค่าที่ฉีดมีชนิดข้อมูลถูกต้อง
การจัดเตรียมค่าให้โทเค็น
ลงทะเบียนโทเค็นพร้อมค่าด้วย useValue ในอาร์เรย์ providers
// bootstrapApplication(AppComponent, {
// providers: [{ provide: API_URL, useValue: 'https://api.example.com' }]
// });การฉีดโทเค็น
ฉีดโทเค็นด้วยฟังก์ชัน inject เพื่อรับค่าของโทเค็น
import { inject } from '@angular/core';
import { API_URL } from './tokens';
export class Api {
private baseUrl = inject(API_URL);
}โทเค็นสำหรับการกำหนดค่า
การใช้งานที่พบบ่อยคือการกำหนดค่าแอป: กำหนดอินเทอร์เฟซ สร้างโทเค็นที่ระบุชนิดเป็นอินเทอร์เฟซนั้น และจัดเตรียมออบเจ็กต์การกำหนดค่า
export interface AppConfig { title: string; retries: number; }
export const APP_CONFIG = new InjectionToken<AppConfig>('APP_CONFIG');การจัดเตรียมการกำหนดค่า
จากนั้นจัดเตรียมค่าการกำหนดค่าขณะเริ่มต้นแอป
// providers: [{ provide: APP_CONFIG, useValue: { title: 'My App', retries: 3 } }]ค่าเริ่มต้นจากโรงงาน
โทเค็นสามารถให้ค่าเริ่มต้นผ่านโรงงานในตัวเลือกของโทเค็นได้ จึงยังทำงานได้แม้ไม่มีผู้ให้บริการที่ระบุไว้อย่างชัดเจน
export const RETRIES = new InjectionToken<number>('RETRIES', {
providedIn: 'root',
factory: () => 3
});โทเค็นเทียบกับคลาส
ใช้คลาสเป็นคีย์เมื่อการพึ่งพาเป็นคลาสบริการ ใช้ InjectionToken เมื่อฉีดค่าที่ไม่ใช่คลาส เช่น การกำหนดค่า ค่าพื้นฐาน หรือออบเจ็กต์ที่มีชนิดเป็นอินเทอร์เฟซ
หลีกเลี่ยงสตริงมหัศจรรย์
InjectionToken แทนที่คีย์สตริงที่เปราะบางด้วยตัวระบุที่มีชนิดข้อมูลและไม่ชนกัน ช่วยตรวจจับข้อผิดพลาดขณะคอมไพล์
ตรวจสอบอย่างรวดเร็ว: โทเค็น
การฉีดค่าที่ไม่ใช่คลาส
สรุป: โทเค็นการฉีด
คุณได้เรียนรู้ว่า InjectionToken มอบคีย์ที่มีชนิดข้อมูลสำหรับฉีดค่าที่ไม่ใช่คลาส เช่น ออบเจ็กต์การกำหนดค่า สตริง และข้อมูลที่มีชนิดเป็นอินเทอร์เฟซ สร้างด้วย new InjectionToken จัดเตรียมด้วย useValue หรือค่าเริ่มต้นจากโรงงาน และฉีดด้วย inject() คุณเรียนจบหลักสูตรการฉีดการพึ่งพาแล้ว
คำถามที่พบบ่อย
บทเรียน “โทเค็นการฉีด” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “โทเค็นการฉีด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “โทเค็นการฉีด”
ฉีดค่าที่ไม่ใช่คลาสด้วยโทเค็น คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “โทเค็นการฉีด” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ