程式碼一覽：

// 在模組中宣告依賴注入的服務
@NgModule({
  // 當這兩個屬性值同名時，可以簡寫為：ProductService
  providers: [{provide: ProductService, useClass: AnotherProductService}]
})
// 元件類中
export class ProductComponent {
  product: Product
  constructor(productService: ProductService) { // 這一步將ProductService例項化後的物件賦值給了productService變數
    this.product = productService.getProduct() // 這裡呼叫了ProductService例項的方法
  }
}
 

angular中如何實現依賴注入

兩個主要概念

    注入器

你需要誰的例項，直接在建構函式的引數裡指定變數和型別就好了。

constructor(private productService: ProductService) { ... }

  提供器

angular需要知道怎樣來例項化這個服務

// 兩個屬性同名
providers: [ProductService]
// 完整寫法
providers: [{provide: ProductService, useClass: ProductService}]
// 不同命寫法
providers: [{provide: ProductService, useClass: AnotherProductService}]
// 用工廠方式建立這個例項
providers: [{provide: ProductService, useFactory: ()=>{...}}]
 

作用域

• 在模組中提供的服務，作用域是它下邊的所有元件（絕大多數情況）；
• 在元件中提供的服務，只能在該元件中使用（@Component是@Injectable的例項。所以，元件的注入寫在@Component下就好了）；
• 如果在模組中和元件中提供了同名的服務，那麼模組中的服務將被元件中的同名服務所覆蓋