angular依賴注入

angular的依賴注入
三個重要的概念介紹：
一、注入器：提供一系列的介面用於建立依賴物件的例項。
二、Provider：用來配置注入器，注入器通過它來建立被依賴物件的例項。
三、依賴：指定了被依賴物件的型別，注入器會根據此型別建立對應的物件。

在元件中注入服務

在元件中使用依賴注入需要完成以下三個步驟：
（1）通過import匯入被依賴物件的服務
（2）在元件中配置注入器。在元件啟動時，angular會讀取@Component裝飾器裡的providers後設資料，它是一個陣列，配置了該元件需要使用到的所有依賴，Angular的依賴注入框架會根據這個列表來建立對應物件的例項。
（3）在元件建構函式中宣告需要注入的依賴。
例如：

import {ContactService} from './shared/contact.service';
import{LoggerService} from './shared/logger.service';
@Component({
      selector: 'contact-app',
      providers: [ContactService],
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
})
export class ContactAppComponent{
       constructor(logger:LoggerService,contactService: ContactService){}
}

每個元件都可以有自己的注入器，通過依賴注入到該元件中的每個服務都維持單例。如果某個元件不希望複用從根元件注入器獲取的服務，則可以在自己的注入器中以新的配置重新注入，這是angular依賴注入的另一個特性，即層級注入。

在服務中注入服務

和在元件中注入類似
只有當一個服務依賴其他服務的時候，才需要用@Injectable()來顯示的裝飾，Angular官方推薦一個服務不論是否依賴其他的服務，都應該使用@Injectable()來裝飾服務。

在模組中注入服務

Angular在啟動程式時會啟動一個根模組，並載入它所依賴的其他模組，此時會生成一個全域性的根注入器，由該注入器建立的依賴注入物件在整個應用程式級別可見，並共享一個例項。同時，根模組會指定一個根元件並啟動，由該根元件新增的依賴注入物件在元件樹級別可見，在根元件及自元件中共享一個例項。

import {LoggerService} from './shared/logger.service'
@NgModule({
      import:[BrowserModule,ContactModule],
      declarations:[AppComponent],
      providers: [LoggerService],
      bootstrap:[Appcomponent]
});
export class AppModule{}

層級注入

注入可以發生在整個元件樹的任意一個層級，並在各層級元件的注入器中維持單例，依賴注入可以傳遞到子孫元件中，子元件可以共享父元件中注入的例項，無需再建立。如果注入了多個例項，這些後代元件也可以共享這些例項。

Provider

用來描述注入器如何初始化標識所對應的依賴服務。
Provider註冊方式：
類Provider
例

@NgModule({
      import:[BrowserModule,ContactModule],
      declarations:[AppComponent],
      providers: [LoggerService],
      bootstrap:[Appcomponent]
});

值Provider
依賴物件不一定是類，可以是常量、字串、物件等其他資料型別，以方便用在全域性變數、系統相關引數配置等場景中。
例如

@NgModule({
      import:[BrowserModule,ContactModule],
      declarations:[AppComponent],
      providers: [
           {provide:'urlSetting',useValue:globalSetting},
           {provide:'NAME',useValue:'揭祕Angular'}
      ],
      bootstrap:[Appcomponent]
});

別名Provider
可以在一個Provider中配置多個標識，其對應的物件指向同一個例項，從而實現多個依賴，一個物件例項的作用。
例如：

providers：[
      {provide:NewLoggerService,useClass:NewLoggerService},
      {provide:OldLoggerService,useClass:NewLoggerService}
]

工廠Provider
有時候依賴物件是不明確且動態變化的，可能需要根據執行環境、執行許可權來生成。Provider需要一種動態生成依賴物件的能力，工廠Provider可以解決這個問題。

let contactServiceFactory = {_logger:LoggerService,_userService:UserService}=>{
      return new contactService(_logger,_userService.user.isAuthorized);
}
export let contactServiceProvider = {
      provide: ContactService,useFactory:contactServiceFactory,deps:[
       LoggerService,UserService]};