摘要：告訴注入器如何創(chuàng)建該服務(wù)，可以通過(guò)設(shè)置元數(shù)據(jù)來(lái)配置注入器種方式在服務(wù)本身的裝飾器中。裝飾器具有一個(gè)名叫的元數(shù)據(jù)選項(xiàng)，在這里指定把被裝飾類的放到注入器中，或某個(gè)特定的注入器中。

創(chuàng)建服務(wù)需要用到Injectable，@Injectable() 裝飾器把類標(biāo)記為可供注入的服務(wù)，不過(guò)在使用該服務(wù)的 provider 配置好 Angular 的依賴注入器之前，Angular 實(shí)際上無(wú)法將其注入到任何位置。

provider告訴注入器如何創(chuàng)建該服務(wù)，可以通過(guò)設(shè)置元數(shù)據(jù)來(lái)配置注入器（3種方式）：

在服務(wù)本身的 @Injectable() 裝飾器中。

在 NgModule 的 @NgModule() 裝飾器中。

在組件的 @Component() 裝飾器中。

@Injectable() 裝飾器具有一個(gè)名叫 providedIn 的元數(shù)據(jù)選項(xiàng)，在這里指定把被裝飾類的provider放到 root 注入器中，或某個(gè)特定 NgModule 的注入器中。

@NgModule() 和 @Component() 裝飾器都有用一個(gè) providers 元數(shù)據(jù)選項(xiàng)，在那里你可以配置 NgModule 級(jí)或組件級(jí)的注入器。

在某個(gè)注入器范圍內(nèi)，服務(wù)是單例的。應(yīng)用只有一個(gè)根注入器，angular具有多級(jí)注入器系統(tǒng)，以為者下級(jí)注入器可以創(chuàng)建自己的服務(wù)實(shí)例。

每當(dāng) Angular 創(chuàng)建一個(gè)在 @Component() 中指定了 providers 的組件實(shí)例時(shí)，它也會(huì)為該實(shí)例創(chuàng)建一個(gè)新的子注入器。 類似的，當(dāng)在運(yùn)行期間加載一個(gè)新的 NgModule 時(shí)（即lazy module），Angular 也可以為它創(chuàng)建一個(gè)擁有自己的提供商的注入器。

借助注入器繼承機(jī)制，仍然可以把全應(yīng)用級(jí)的服務(wù)注入到這些組件中。 組件的注入器是其父組件注入器的子節(jié)點(diǎn)，也是其父節(jié)點(diǎn)的父節(jié)點(diǎn)的后代，以此類推，直到應(yīng)用的根注入器為止。 Angular 可以注入該繼承譜系中任何一個(gè)注入器提供的服務(wù)。

模塊化編程時(shí)，service、component、pipe等最好都放在module中，需要引入這些服務(wù)時(shí)，通過(guò)導(dǎo)入module來(lái)引用，不要直接import service 和component，這不符合模塊化思想。

應(yīng)用程序中有一個(gè)與組件樹(shù)平行的注入器樹(shù)，對(duì)于在什么級(jí)別上注入會(huì)最終導(dǎo)致：

最終包的大小

服務(wù)的范圍

服務(wù)的生命周期

當(dāng)在服務(wù)自身的@Injectable()裝飾器中指定provider時(shí)，CLI生產(chǎn)模式所用的優(yōu)化工具可以進(jìn)行搖樹(shù)優(yōu)化，它會(huì)移除那些沒(méi)有用過(guò)的服務(wù)，搖樹(shù)優(yōu)化生成的包更小。

root級(jí)，是AppModule全局的，配置方法已提。

NgModule級(jí)，兩種方法：可以在module的@NgModule 的 provider 元數(shù)據(jù)中指定；也可以在@injectable() 的providerIn選項(xiàng)中指定某個(gè)模塊類

如果模塊是lazy modole，需要使用@NgModule的provider選項(xiàng)。

組件級(jí)為每個(gè)component實(shí)例配置自己的注入器

無(wú)論對(duì)于根級(jí)注入器還是模塊級(jí)注入器，服務(wù)實(shí)例的生存期都和應(yīng)用或模塊本身相同。Angular 可以把這個(gè)服務(wù)實(shí)例注入到任何需要它的類中(即app內(nèi)是單例的)。Angular 只能把相應(yīng)的服務(wù)注入到該組件實(shí)例或其下級(jí)組件實(shí)例中，而不能把這個(gè)服務(wù)實(shí)例注入到其它地方(即組件內(nèi)并不是單例的)。

當(dāng)一個(gè)組件申請(qǐng)獲得一個(gè)依賴時(shí)，Angular 先嘗試用該組件自己的注入器來(lái)滿足它。 如果該組件的注入器沒(méi)有找到對(duì)應(yīng)的提供商，它就把這個(gè)申請(qǐng)轉(zhuǎn)給它父組件的注入器來(lái)處理。 如果那個(gè)注入器也無(wú)法滿足這個(gè)申請(qǐng)，它就繼續(xù)轉(zhuǎn)給它在注入器樹(shù)中的父注入器。 這個(gè)申請(qǐng)繼續(xù)往上冒泡 —— 直到 Angular 找到一個(gè)能處理此申請(qǐng)的注入器或者超出了組件樹(shù)中的祖先位置為止。 如果超出了組件樹(shù)中的祖先還未找到，Angular 就會(huì)拋出一個(gè)錯(cuò)誤。

在angular中創(chuàng)建單例服務(wù)有兩種方式：

在創(chuàng)建服務(wù)時(shí)聲明該服務(wù)在應(yīng)用的根上提供

把該服務(wù)包含在AppModule或者某個(gè)只會(huì)被AppModule導(dǎo)入的模塊中

這里第一條很容易理解。重點(diǎn)第二條：當(dāng)通過(guò)@NgMododule()來(lái)聲明一個(gè)serivce時(shí)，這個(gè)服務(wù)在AppModule內(nèi)將會(huì)是單例的，當(dāng)一個(gè)module中提供了一個(gè)service，當(dāng)另一個(gè)lazy module導(dǎo)入了這個(gè)模塊時(shí)，angular會(huì)為它創(chuàng)一個(gè)子注入器，會(huì)重新創(chuàng)建service的實(shí)例，此service也就多了一個(gè)實(shí)例。

如果某個(gè)模塊同時(shí)提供了服務(wù)提供商和可聲明對(duì)象（組件、指令、管道），那么當(dāng)在某個(gè)子注入器中加載它的時(shí)候（比如lazy module），就會(huì)生成多個(gè)該服務(wù)提供商的實(shí)例。 而存在多個(gè)實(shí)例會(huì)導(dǎo)致一些問(wèn)題，因?yàn)檫@些實(shí)例會(huì)屏蔽掉根注入器中該服務(wù)提供商的實(shí)例，而它的本意可能是作為單例對(duì)象使用的。 因此，Angular 提供了一種方式來(lái)把服務(wù)提供商從該模塊中分離出來(lái)，以便該模塊既可以帶著 providers 被根模塊導(dǎo)入，也可以不帶 providers 被子模塊導(dǎo)入。

如上文所述，當(dāng)在運(yùn)行期間加載一個(gè)新的 NgModule 時(shí)（即lazy module），Angular 也可以為它創(chuàng)建一個(gè)注入器，所以此時(shí)導(dǎo)入的其他模塊中的service就生成了多個(gè)實(shí)例，而forRoot可以保證并不創(chuàng)建新的service實(shí)例，而是去引用root注入器中的service實(shí)例，也就保證了service依然是個(gè)單例服務(wù)。

在懶加載模塊中導(dǎo)入有service的TestDIModule模塊

@NgModule({
  imports: [
    CommonModule,
    BatteryRoutingModule,
    TestDIModule
  ],
  declarations: [BatteryWidgetComponent, BatteryTwoComponent,
    DemoComponent]
})

在TestDIModule模塊中

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [TestDiComponent],
  exports: [TestDiComponent],
  providers: [  ]
})
export class TestDIModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: TestDIModule,
      providers: [
        TestDiService
      ]
    };
  }
 }

在根模塊中引入TestDIModule模塊

imports: [
    BrowserModule,
    TestDIModule.forRoot(),
  ],

最后在根模塊路由中添加這個(gè)懶加載模塊

const routes: Routes = [
  { path: "battery", loadChildren: "./battery-widget/battery.widget.module#BatteryWidgetModule" },
];

@NgModule({
  exports: [ RouterModule ],
  imports: [ RouterModule.forRoot(routes)
  ],
})

作為測(cè)試，可以在TestDIModule中的service中打log看一下

import { Injectable, ModuleWithProviders } from "@angular/core";
import { TestDIModule } from "./test-di.module"

@Injectable()
export class TestDiService {

  constructor() {
    console.log("->TestDiService");
  }

  addCoount() {
    this.count++;
    console.log("->count", this.count);
  }

  count = 0;
}