การฉีดการพึ่งพาแบบลำดับชั้นของ Angular ทำงานอย่างไร

DI ของ Angular เป็น แบบลำดับชั้น: injectors สร้างเป็นแผนภูมิที่สะท้อนแผนภูมิ component/module เมื่อ component ขอ dependency Angular จะเดินขึ้น ตรวจสอบ แผนภูมิ injector จนกว่าจะพบ provider — ซึ่งควบคุมว่าคุณได้ singleton ที่ใช้ร่วมกันหรือ instance แยกต่างหากสำหรับแต่ละ component

ลำดับชั้น injector

Root injector (app-wide)           ← providedIn: 'root' lives here (one singleton)
  └─ Module/Route injectors
      └─ Component injector          ← providers: [...] in @Component
          └─ Child component injector

การค้นหาเริ่มต้นที่ component ที่ขออยู่และเพิ่มขึ้นไปยัง root Provider ที่พบจะชนะ