轉換angularjs服務到角分2次服，當我們有一個服務注入另一個服務

Question

我看到一個服務（BService）注入到另一個服務的代碼（AService）：

(function() { 
    "use strict" 

    class AService { 

     constructor(BService) { 
      this.BService = BService; 
     } 

     static AFactory(BService) { 
      return new AService(BService); 
     } 
    } 
    AService.AFactory.$inject = ['BService']; 
    angular.module('test').service('AService', AService.AFactory); 
})(); 

1. 什麼是AService.AFactory.$inject做？爲什麼我們在這裏需要AFactory？我可以在這裏刪除AFactory嗎？

2. 我想將上述服務轉換爲以下角度2服務。我對嗎？

   import { Injectable } from '@angular/core'; 
       import { BService } from './b.service' 
   
       @Injectable() 
       export class AService { 
   
        constructor(private BService: BService) { 
   
        } 
   
   
       } 
   
       angular.module('test').service('AService', AService); 
   

Answer 1

1. 截至https://docs.angularjs.org/guide/di#-inject-property-annotation說：

爲了讓minifiers重命名功能參數，仍然能夠注入正確的服務，該功能需要被註解與$inject屬性。 $inject屬性是要注入的服務名稱的數組。

因此，代碼也可以寫成：

angular.module('test').service('AService', ['BService', function(bService) { 
    // AService logic goes here, 
    // injected BService may be used under bService variable 
    ... 
}]); 

您的代碼表明僅僅是用新的JS類和靜態方法AFactory執行相同的代碼，它通過傳遞給test模塊其等級：AService.AFactory

2.您的代碼是正確的，除了最後一行是多餘的。這裏是關於依賴注入的official guide。見例如服務中的src/app/heroes/hero.service.ts： 1：https://angular.io/guide/dependency-injection#!#why-di

import { Injectable } from '@angular/core'; 

import { HEROES }  from './mock-heroes'; 

@Injectable() 
export class HeroService { 
    getHeroes() { return HEROES; } 
} 

然後，服務需要從組件或模塊 '提供'（SRC /應用/英雄/在上述link heroes.component.ts）：

import { Component }   from '@angular/core'; 

import { HeroService }  from './hero.service'; 

@Component({ 
    selector: 'my-heroes', 
    providers: [ HeroService ], 
    template: ` 
    <h2>Heroes</h2> 
    <hero-list></hero-list> 
    ` 
}) 
export class HeroesComponent { } 

在角2+，模塊與@NgModule註釋中定義的服務被註冊類似於理解過程providers屬性的組件。看到UserService註冊（SRC /應用/從上述link app.module.ts）例如：

// imports here 

@NgModule({ 
    imports: [ 
    BrowserModule 
    ], 
    declarations: [ 
    AppComponent, 
    CarComponent, 
    HeroesComponent, 
    /* . . . */ 
    ], 
    providers: [ 
    UserService, 
    { provide: APP_CONFIG, useValue: HERO_DI_CONFIG } 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

您的NG2代碼可以被重寫爲： // a.service.ts

import { Injectable } from '@angular/core'; 
import { BService } from './b.service' 

@Injectable() 
export class AService { 

    constructor(private bService: BService) { 

    } 
} 

並在任何模塊中註冊：

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { AService } from ''./a.service''; 

@NgModule({ 
    imports: [ 
    BrowserModule 
    ], 
    declarations: [ 
    AppComponent, 
    /* . . . */ 
    ], 
    providers: [ AService ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { }