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);
})();

AService.AFactory.$inject在做什么？为什么我们需要AFactory？我可以在这里删除AFactory吗？

我想将以上服务转换为以下角度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

如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; }
}

然后，服务需要从组件或模块“提供”（上面link中的src / app / heroes / 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注释定义，服务注册类似于组件unde providers属性。请参阅注册了UserService的示例（上面link中的src / app / 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 { }

当我们有一个服务注入另一个服务时，将angularjs服务转换为角度2服务

1 个答案: