簡介

官方文件：Angular - 瞭解依賴注入
官方推薦完成實戰課程：《英雄之旅》應用和課程

• DI 是一種設計模式和機制。DI 被裝配進 Angular 框架，並允許帶有 Angular 裝飾器的類（如：元件、指令、管道和可注入物件）配置它們所需的依賴項。

• DI 有兩個主要角色：依賴提供者（dependency provider）、依賴使用者（dependency consumer）。

Service 開發、註冊、應用

製作 Service 提供給各元件（Component）使用。

// hero.service.ts
// 在 class 頭上新增 @Injectable 裝飾器以表明此類可以被注入。
import { Injectable } from '@angular/core';
@Injectable()
export class HeroService {
  constructor() { }
  dosomething() {...}
}

1、共用實體（instance）

// 在 NgModule 內註冊使用
@NgModule({
  providers: [
    HeroService,
  ]
})

// XXX.component.ts
// 在指定的元件中注入該 Service
export class HeroListComponent implements OnInit {
  constructor(private heroService: HeroService) { }
  ngOnInit() {
    this.heroService.dosomething();
  }
}

2、非共用實體（instance）=不同Component注入新的實體

// XXX.component.ts
// 在指定元件中的 @Component 裝飾器內的 providers 注入該 Service
@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {
  constructor(private heroService: HeroService) { }
  ngOnInit() {}
}

3、將 Service 設定為 Singelton 模式

Singelton 模式：此類別只會存在一個實體物件，提供存取該物件的統一方法。
單例模式 Singleton · 設計模式學習筆記 - Study Design Pattern In Java

// hero.service.ts
// 在 class 頭上的 @Injectable 裝飾器設定 providedIn: 'root'。
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class HeroService {
  constructor() { }
  dosomething() {...}
}

資料來源

Angular 服務與依賴注入 | SoarLin