2017-07-24 1 views
2

ich einen Code zu sehen, dass ein Dienst (bService) in einen anderen Dienst injiziert (Aservice):AngularJS Service in Winkel 2-Dienst umwandeln, wenn wir einen Service haben einen anderen Dienst injiziert

(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. Was ist AService.AFactory.$inject tun ? Warum brauchen wir AFactory hier? Kann ich AFactory hier entfernen?

  2. Ich möchte über Service in folgenden Winkel 2 Service konvertieren. Habe ich recht?

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

AService.AFactory ist antipattern. Der Fall braucht eine Erklärung. Wenn Sie diese Datei gleichzeitig in der A1- und A2-App verwenden müssen, ist das eine Sache. Eine andere Sache ist, wenn Sie es in A2 konvertieren und nicht in A1 verwenden müssen. – estus

Antwort

1
  1. wie bei https://docs.angularjs.org/guide/di#-inject-property-annotation angegeben:

die minifiers Damit die Funktionsparameter umbenennen und noch in der Lage sein, die richtigen Dienste zu injizieren, muss die Funktion mit Anmerkungen versehen werden mit der $inject Eigenschaft. Die $inject-Eigenschaft ist ein Array von zu injizierenden Dienstnamen.

So ist der Code auch geschrieben werden könnte:

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

von Ihrem Code zeigte nur der gleiche Code mit neuer JS-Klasse implementiert und statischer Methode AFactory, die über zu test Modul geleitet wird, sein Klasse: AService.AFactory

2.Ihr Code ist korrekt, außer für die letzte Zeile, die redundant ist. Hier ist eine official guide über Abhängigkeitsinjektion. Siehe Beispiel bei Service 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; } 
} 

Dann wurde der Service benötigen '' versehen, von der Komponente oder Modul (src/app/Helden/heroes.component.ts in den obigen link) werden:

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 { } 

in Winkel 2+, sind Module mit @NgModule Annotation definiert und Dienstleistungen an Komponenten unde providers Eigenschaft ähnlich registriert. Siehe Beispiel mit UserService registriert (src/app/app.module.ts vom link oben):

// imports here 

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

Ihr NG2 Code neu geschrieben werden kann als: // a.service.ts

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

@Injectable() 
export class AService { 

    constructor(private bService: BService) { 

    } 
} 

und Registrierung in jedem Modul:

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 { } 
Verwandte Themen