隨記

Week 08 · Day 02 — Provider 與注入範圍

學習目標

  • 理解 provider 的意義
  • 認識不同注入範圍（元件、模組、root）
  • 用 provide 自訂提供方式

重點

服務從哪來：Provider - Provider 告訴 DI「怎麼建立這個依賴」 - 沒特別寫時，@Injectable({ providedIn: 'root' }) 已自動提供

三種常見範圍 | 範圍 | 用法 | 實例數量 | |------|------|----------| | root | @Injectable({ providedIn: 'root' }) | 全域一個 | | 模組 | providers 於 @NgModule | 模組層級 | | 元件 | providers 於 @Component | 每個元件實例一個 |

元件層級範例 

@Component({
  selector: 'app-counter',
  providers: [CounterService],   // 每個 CounterComponent 各自一個實例
  template: `...`
})
export class CounterComponent {}
- 每個元件有自己的 CounterService 實例狀態

自訂 provider（provide + useClass / useValue） 

{ provide: ApiUrl, useValue: 'https://api.example.com' }
{ provide: AuthService, useClass: MockAuthService }   // 測試替換

選擇原則 - 要跨元件共享資料 → root - 要每個元件獨立狀態 → 元件 providers

實作

  1. 把 CounterService 設在元件 providers，用兩個元件實例比較狀態是否各自獨立
  2. 改用 root 再比較，觀察共享效果

作業

  • 用元件層級 providers 建立各自獨立實例
  • 比較 root 與元件層級的行為差異
  • 用 useClass 更換實作（如測試用 mock）