【背景】

最近在學習Angular，迫不及待想跟學習到的知識跟大家分享。

【內容】

什麼是依賴注入？

依賴注入是“控制反轉”（將例項化這個類的控制權交給外部，從而實現類與元件的解耦）的一體兩面。控制反轉是目的，依賴注入是手段。是不是不太明白，說得直白一點就是在程式執行過程中，如果需要呼叫另一個物件協助時，無須在程式碼中建立被呼叫者，而是依賴於外部的注入。

怎麼用？

我們在元件需要某個服務的例項時，不需要手動建立這個例項，只需要在建構函式的引數中指定這個例項的變數，以及這個例項的類，然後angular會根據這個類的名字找到providers屬性中指定的同名的provide，再找到它對應的useclass，最終自動建立這個服務的例項。

一、注入器

在元件中的constructor中：

constructor(private productService: ProductService){}

二、提供器

通常提供器定義在應用級，及app.module.ts中，供所有元件或服務使用，當然也可以定義在某一個元件中，只供這一個元件使用。

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

這段程式碼中的provide宣告的就是我們剛剛在注入器中提過的token，就是說這兩個token是一一對應的，Angular會到提供器中找到和注入器相同的token。程式碼中的useClass是例項化ProductService類，即幫助我們new了一個類出來，除了useClass外，比較常用的還有useFactory，使用工廠模式例項化一個類，還有useValue。這時候我們在元件中就可以直接使用ProductService類中的方法了。

好處是什麼？

在Angular中使用依賴注入，可以幫助我們實現鬆耦合，實現元件的可重用性。
如果我們有個服務product.service.ts，其中export了一個ProductService類，類中有一個getProducts方法。 

如果現在product元件用到了另一個地方需要另一個服務，我們命名為OtherProductService，有了依賴注入之後我們就不必更改元件的內容，只需要更改app.module.ts中的提供器。

@NgModule({
    provide: ProductService,
    useClass: OtherProductService
})

這段程式碼中，token並沒有改變，可是例項化的類變了。

提供器的作用域原則

1.提供器宣告在模組時是對所有元件是可見的，所有元件都可以注入。

2.當一個提供器宣告在元件時，只對他宣告的元件和子元件可見，其他元件不可注入。

3.當宣告在模組的提供器和元件的提供器具有相同的token時，宣告在元件的提供器會覆蓋模組的提供。

4.服務提供器優先宣告在模組中，只有服務必須在某個元件可見，對其他元件不可見時才宣告在元件中

【感受】

基礎知識點先一點點總結著，期待破繭成蝶的那一天。