Angular Academy · บทเรียน

ผู้ให้บริการและขอบเขต

ควบคุมว่าบริการจะอยู่ที่ใดในโครงสร้างต้นไม้

บทเรียน 3 จาก 413 ขั้นตอน

ผู้ให้บริการและขอบเขต เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

ผู้ให้บริการและขอบเขต

ผู้ให้บริการบอก Angular ว่าจะสร้างการพึ่งพาอย่างไร ส่วนขอบเขตที่ใช้ลงทะเบียนจะกำหนดจำนวนอินสแตนซ์และผู้ที่ใช้ร่วมกัน

ขอบเขตราก

providedIn: root จะลงทะเบียนบริการในตัวฉีดระดับราก ทำให้มีซิงเกิลตันร่วมหนึ่งรายการตลอดทั้งแอป นี่เป็นตัวเลือกที่ใช้กันทั่วไปที่สุด

@Injectable({ providedIn: 'root' })
export class AppStore {}

ผู้ให้บริการระดับคอมโพเนนต์

คุณกำหนดขอบเขตบริการให้เป็นระดับคอมโพเนนต์ได้ด้วยการระบุบริการในอาร์เรย์ providers ของคอมโพเนนต์ แต่ละอินสแตนซ์ของคอมโพเนนต์จะได้รับอินสแตนซ์ของบริการเป็นของตัวเอง

import { Component } from '@angular/core';
import { LocalStore } from './local-store';

@Component({
  selector: 'app-panel',
  providers: [LocalStore],
  template: ''
})
export class PanelComponent {}

เหตุผลที่ใช้ขอบเขตคอมโพเนนต์

ใช้ผู้ให้บริการระดับคอมโพเนนต์เมื่อแต่ละอินสแตนซ์ของคอมโพเนนต์ต้องมีสถานะแยกเป็นอิสระของตัวเอง เช่น ออบเจ็กต์สถานะฟอร์มหรือที่เก็บข้อมูลประจำวิดเจ็ต

ระดับรากเทียบกับระดับคอมโพเนนต์

ระดับราก: มีหนึ่งอินสแตนซ์ที่ใช้ร่วมกันทุกที่ ระดับคอมโพเนนต์: มีหนึ่งอินสแตนซ์ต่ออินสแตนซ์ของคอมโพเนนต์ (รวมถึงคอมโพเนนต์ลูก) ให้เลือกตามว่าสถานะควรใช้ร่วมกันหรือแยกออกจากกัน

ลำดับชั้นของตัวฉีด

ตัวฉีดของ Angular เรียงตัวเป็นทรี เมื่อแก้การพึ่งพา Angular จะค้นหาในตัวฉีดของคอมโพเนนต์ จากนั้นไล่ขึ้นไปยังตัวแม่ และสุดท้ายจึงค้นหาที่ระดับราก

คอมโพเนนต์ลูกสืบทอดการตั้งค่า

บริการที่จัดเตรียมไว้ในคอมโพเนนต์จะพร้อมใช้ในคอมโพเนนต์ลูกด้วย เว้นแต่คอมโพเนนต์ลูกจะจัดเตรียมอินสแตนซ์ของตัวเอง ซึ่งจะบดบังของตัวแม่

ผู้ให้บริการระดับแอปพลิเคชัน

คุณยังลงทะเบียนผู้ให้บริการขณะเริ่มต้นแอปได้ในอาร์เรย์ providers ของ bootstrapApplication เช่นเดียวกับขอบเขตราก โดยมักใช้ผ่านฟังก์ชัน provide*

// bootstrapApplication(AppComponent, {
//   providers: [provideHttpClient()]
// });

useClass และ useValue

ผู้ให้บริการสามารถแมปโทเค็นไปยังคลาสด้วย useClass ไปยังค่าคงที่ด้วย useValue หรือไปยังโรงงานด้วย useFactory ซึ่งช่วยให้แทนที่การทำงานและกำหนดค่าได้

// providers: [{ provide: Logger, useClass: ConsoleLogger }]

การสลับการทำงานที่นำไปใช้

เนื่องจากผู้ให้บริการแมปโทเค็นไปยังการทำงานที่นำไปใช้ คุณจึงสลับการทำงานได้ เช่น ใช้สิ่งจำลองในการทดสอบ โดยไม่ต้องเปลี่ยนโค้ดส่วนที่เรียกใช้

การเลือกขอบเขต

โดยทั่วไปให้เลือก root สำหรับซิงเกิลตันที่ใช้ร่วมกันทั้งแอป เลือกผู้ให้บริการระดับคอมโพเนนต์เฉพาะเมื่อต้องการสถานะแยกอิสระสำหรับแต่ละอินสแตนซ์

ตรวจสอบอย่างรวดเร็ว: ขอบเขต

สถานะเฉพาะแต่ละอินสแตนซ์

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป: ผู้ให้บริการและขอบเขต

คุณได้เรียนรู้ว่าผู้ให้บริการอธิบายวิธีสร้างการพึ่งพา และขอบเขตควบคุมการสร้างอินสแตนซ์ ได้แก่ root สำหรับซิงเกิลตันทั้งแอป และผู้ให้บริการระดับคอมโพเนนต์สำหรับการแยกสถานะแต่ละอินสแตนซ์ Angular แก้การพึ่งพาผ่านลำดับชั้นของตัวฉีด และ useClass/useValue/useFactory ช่วยให้สลับการทำงานที่นำไปใช้ได้ ต่อไป: โทเค็นการฉีด

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 38
บทเรียน: 144

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “ผู้ให้บริการและขอบเขต” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ผู้ให้บริการและขอบเขต” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ผู้ให้บริการและขอบเขต”

ควบคุมว่าบริการจะอยู่ที่ใดในโครงสร้างต้นไม้ คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “ผู้ให้บริการและขอบเขต” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม

ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Angular Academy