ฟังก์ชัน inject
แก้ไขดีเพนเดนซีด้วยฟังก์ชัน inject
ฟังก์ชัน inject เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
ฟังก์ชัน inject
ฟังก์ชัน inject() ดึงการพึ่งพาจากตัวฉีด เป็นทางเลือกสมัยใหม่แทนการฉีดการพึ่งพาผ่านพารามิเตอร์ของคอนสตรักเตอร์
การใช้งานพื้นฐาน
เรียกใช้ inject พร้อมคลาสที่ต้องการ แล้วกำหนดผลลัพธ์ให้กับฟิลด์
import { Component, inject } from '@angular/core';
import { DataService } from './data.service';
@Component({ selector: 'app-x', template: '' })
export class XComponent {
private data = inject(DataService);
}เปรียบเทียบกับการฉีดผ่านคอนสตรักเตอร์
รูปแบบเดิมจะประกาศการพึ่งพาเป็นพารามิเตอร์ของคอนสตรักเตอร์ ส่วน inject() ทำหน้าที่เดียวกันในฐานะตัวกำหนดค่าเริ่มต้นของฟิลด์ ซึ่งมักอ่านได้สะอาดกว่า
// old style:
// constructor(private data: DataService) {}ตำแหน่งที่เรียกใช้ inject ได้
ต้องเรียกใช้ inject() ในบริบทการฉีด เช่น ระหว่างการสร้างคอมโพเนนต์ คำสั่ง หรือบริการ รวมถึงในตัวกำหนดค่าเริ่มต้นของฟิลด์และฟังก์ชันโรงงานของผู้ให้บริการ
การฉีดในบริการ
ใช้ inject ภายในบริการได้เช่นกัน เช่น เพื่อรับ HttpClient
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({ providedIn: 'root' })
export class Api {
private http = inject(HttpClient);
}ลดโค้ดประกอบที่ไม่จำเป็น
เมื่อใช้ inject คุณไม่ต้องเขียนลายเซ็นคอนสตรักเตอร์ที่ยาว แต่ละการพึ่งพาเป็นการประกาศฟิลด์แบบเรียบง่าย จึงอ่านและจัดลำดับใหม่ได้ง่าย
การใช้บริการที่ฉีดแล้ว
เมื่อฉีดแล้ว ให้เรียกใช้บริการได้เหมือนออบเจ็กต์ทั่วไป
export class XComponent {
private store = inject(CounterStore);
add() { this.store.increment(); }
}inject ในตัวป้องกันแบบฟังก์ชัน
ตัวป้องกันเส้นทางและตัวแก้ไขแบบฟังก์ชันทำงานในบริบทการฉีด คุณจึงเรียกใช้ inject ภายในตัวป้องกันหรือตัวแก้ไขเพื่อเข้าถึงบริการได้
// export const authGuard = () => {
// const auth = inject(AuthService);
// return auth.isLoggedIn();
// };การพึ่งพาที่เป็นทางเลือก
inject รับตัวเลือกต่าง ๆ ได้ เช่น กำหนดให้การพึ่งพาเป็นทางเลือก เพื่อให้คืนค่า null แทนการโยนข้อผิดพลาดเมื่อไม่มีการจัดเตรียมไว้
// const logger = inject(Logger, { optional: true });อยู่นอกบริบทการฉีด
การเรียกใช้ inject นอกบริบทการฉีด เช่น ในการเรียกกลับของ setTimeout จะโยนข้อผิดพลาด ให้เก็บการพึ่งพาไว้ระหว่างการสร้างแทน
เหตุผลที่ควรเลือกใช้ inject
inject ทำงานได้ดีกับมิกซ์อิน คลาสพื้นฐาน และ API แบบฟังก์ชัน อีกทั้งช่วยให้คลาสคอมโพเนนต์กระชับ เป็นแนวทางที่แนะนำสำหรับ Angular สมัยใหม่
ตรวจสอบอย่างรวดเร็ว: inject
การดึงการพึ่งพา
สรุป: inject
คุณได้เรียนรู้ฟังก์ชัน inject() ซึ่งเป็นวิธีสมัยใหม่ในการรับการพึ่งพา โดยใช้ได้ในคอมโพเนนต์ บริการ และตัวป้องกันแบบฟังก์ชันภายในบริบทการฉีด วิธีนี้ลดโค้ดประกอบเมื่อเทียบกับการฉีดผ่านคอนสตรักเตอร์ และรองรับตัวเลือกอย่าง optional ต่อไป: ผู้ให้บริการและขอบเขต
คำถามที่พบบ่อย
บทเรียน “ฟังก์ชัน inject” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ฟังก์ชัน inject” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ฟังก์ชัน inject”
แก้ไขดีเพนเดนซีด้วยฟังก์ชัน inject คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “ฟังก์ชัน inject” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- บริการและ Injectable
- ฟังก์ชัน inject
- ผู้ให้บริการและขอบเขต
- โทเค็นการฉีด