angular依賴注入

依賴注入是angular中一個十分經常使用的功能，但因爲本身之前寫的代碼並無用到依賴注入的高級功能，因此也就沒有系統的學習過，正好這段時間看angular的官方文檔看到了這裏，就簡單的總結一下。

什麼是依賴注入

關於什麼是依賴注入，實際上仍是很好理解的，依賴注入一般和控制反轉聯繫在一塊兒

依賴注入（DI）和控制反轉（IOC）基本是一個意思，由於提及來誰都離不開誰。
簡單來講，類A依賴類B，但A不控制B的建立和銷燬，僅使用B，那麼B的控制權則交給A以外處理，這叫控制反轉（IOC）。
因爲A依賴於B，所以在A中必然要使用B的instance，咱們能夠經過A的構造函數將B的實例注入，好比：

下面是一個簡單的，用ts實現的依賴注入的例子：

class B { }
class A {
  constructor(b: B) { 
      console.log(b);
  }
}
const b = new B();
// 將B的實例注入到a中
const a = new A(b);

angular的依賴注入

angular 有本身的 DI 框架,因此在實現依賴注入的過程被隱藏了，咱們只須要很簡單的步驟就可使用其強大的依賴注入功能。

angular的依賴注入能夠分爲三個步驟：

1. 獲得依賴項
2. 查找依賴項所對應的對象
3. 執行時注入

下面是一個例子

使用依賴注入組件

@Component({
  selector: 'app-test',
  template: ``
})
export class TestComponent {
  constructor(userService: UserService) {
  }
}

建立將被注入的UserService

// @Injectable() 裝飾器把它標記爲可供注入的服務
@Injectable({
// 指定把被裝飾類的提供商放到 root 注入器中，也就是一個全局的對象
  providedIn: 'root',
})
export class UserService {
  constructor() { }
}

這樣就算把一個UserService注入到了TestComponent中，而且由於提供商被放到了 root 注入器中，所以你能夠在整個應用中使用該對象——
在某個注入器的範圍內，服務是單例的。也就是說，在指定的注入器中最多隻有某個服務的最多一個實例

三種提供商

angular一共有三種提供商，@Injectable，@NgModule，@Component

@Injectable

@Injectable的提供方式就是上面所提到的那樣。

@Injectable() 裝飾器會標出每一個服務類。服務類的元數據選項 providedIn 會指定一個注入器（一般爲 root 來用被裝飾的類做爲該服務的提供商。 當可注入的類向 root 注入器提供了本身的服務時，任何導入了該類的地方都能使用這個服務。同理，你能夠向某個特定 NgModule 的注入器提供本身的服務。

這種注入方式也是使用angular-cli生成服務時默認的方式，也是最經常使用的方式，它同另外兩種注入方式相比，有一個顯著的優勢:若是 NgModule 沒有用到該服務，那麼這個服務就會被搖樹優化掉。

什麼是搖樹優化呢？

搖樹優化是指一個編譯器選項，意思是把應用中未引用過的代碼從最終生成的包中移除。 若是提供商是可搖樹優化的，Angular 編譯器就會從最終的輸出內容中移除應用代碼中從未用過的服務。 這會顯著減少你的打包體積。

@NgModule

你還能夠在非根 NgModule 元數據的 providedIn 選項中配置一個模塊級的提供商，以便把該服務的範圍限定到該模塊一級。
通常來講，你沒必要在 providedIn 中指定 AppModule，由於應用中的 root 注入器就是 AppModule 注入器。 不過，若是你在 AppModule 的 @NgModule() 元數據中配置了全應用級的提供商，它就會覆蓋經過 @Injectable() 配置的那一個。 你能夠用這種方式來爲那些供多個應用使用的服務指定非默認的提供商。
使用方式

providers: [
  { provide: LocationStrategy }
]

@Component

NgModule 中每一個組件都有它本身的注入器。 經過使用 @Component 元數據在組件級配置某個提供商，你能夠把這個提供商的範圍限定到該組件及其子組件。
使用方式以下：

@Component({
  selector: 'app-test',
  providers: [ UserService ],

  template: ``
})
export class TestComponent {
  constructor(userService: UserService) {
  }
}

以上就是三種提供依賴注入的方式。

總結

angular的依賴注入基本用法就基本像上面說的那樣了，而高級用法，好比@Optional等裝飾器，因爲本身到如今爲止都沒用過，就不在獻醜，留待之後，擁有了更豐富的開發經驗，再來嘗試。