Angeben von Anbietern bei Service in Angular 2

Question

Ich versuche das DI-System von Angular 2 zu verwenden, um die Abhängigkeiten meiner Dienste automatisch zu verarbeiten. Ich möchte eine Anmerkung zu dem Dienst selbst verwenden, anstatt den zweiten Parameter bootstrap() zu verwenden, um alle injizierbaren Dienste anzugeben.

Was ich

Ein Low-Level-Service haben:

services/role-store.ts

export class RoleStore { 
    constructor() { 
    // Initialize roles 
    } 

    getById(id) { 
    // accepts id, returns role object 
    } 
}; 

Ein High-Level-Dienst, der auf dem Low-Level-Dienst abhängig:

services/user-store.ts

import {Injectable} from 'angular2/angular2'; 
import {RoleStore} from './role-store.ts'; 

@Injectable() 
export class UserStore { 
    constructor(roleStore: RoleStore) { 
    this.roleStore = roleStore; 
    // Initialize users 
    } 

    roleForUser(user) { 
    let role = this.roleStore.getById(user.roleId); 
    return role; 
    } 
}; 

Eine Komponente, die auf dem High-Level-Dienst abhängt:

components/user-dir.ts

import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2'; 

import {UserStore} from '../services/user-store'; 

@Component({ 
    selector: 'user-dir', 
    bindings: [UserStore] 
}) 
@View({ 
    template: '<!-- inline template -->', 
    directives: [CORE_DIRECTIVES] 
}) 
export class UserDir { 
    constructor(data: UserStore) { 
    this.userStore 
    } 
    // other methods... 
} 

A Wurzelkomponente Bootstrap:

app.ts

import {Component, View, bootstrap} from 'angular2/angular2'; 

import {RoleStore} from './services/role-store'; 
import {UserDir} from './components/user-dir'; 

@Component({ 
    selector: 'app' 
}) 
@View({ 
    template: '<user-dir></user-dir>', 
    styleUrls: ['./app.css'], 
    directives: [UserDir] 
}) 
class App {} 

bootstrap(App, [RoleStore]); 

Das Problem

bootstrap(App, [RoleStore]) funktioniert, aber ich hätte lieber eine Annotation in user-store.ts, die Angular zu injizieren RoleStore sagt.

Etwas wie @Provide(RoleStore) class UserStore {}.

Irgendwelche Ratschläge?

Answer 1

Sie müssen immer providers auf einer bestimmten Ebene registrieren, in Ihrem Fall wäre es sinnvoller, registrieren sie auf der Komponentenebene, so dass die Abhängigkeit dort angegeben ist und nicht auf die gesamte Anwendungsebene. So etwas wie dies ...

@Component({ 
    selector: 'user-dir', 
    template: '<!-- inline template -->', 
    directives: [CORE_DIRECTIVES] 
    providers: [UserStore, RoleStore] 
}) 
export class UserDir { 
    constructor(data: UserStore) { 
    this.userStore 
    } 
    // other methods... 
} 

Dies ist die offizielle Art und Weise, Dinge zu tun, die die Abhängigkeiten manuell in Angular 2 DI Mechanismus registriert auf der spezifischsten Ebene möglich.

Dass gesagt wird, müßten Sie Ihr eigenes Kompilierung/Runtime (init) Tool schreiben, den Code durchqueren würde sammelt alle @Injectable Dienste und registrieren sie in Angular 2 Kontext für Sie (von providers verwenden)

Answer 2

providers auf Dienste nicht https://github.com/angular/angular/issues/5622

unterstützt Was können Sie stattdessen tun ist Arrays von Anbietern zu schaffen, die

export const ROLE_STORE_PROVIDERS: Array<any /*Type | Provider | any[]*/> = 
    [RoleStore]; 

und dergleichen „Module“ exportiert werden n in Module, die Roles Service

export const PARENT_PROVIDERS: Array<any /*Type | Provider | any[]*/> = 
    [ParentService, RoleStore]; 

verwenden und dann verwenden, in Bootstrap

bootstrap(AppComponent, [PARENT_PROVIDERS]); 

Ich gebe zu, ist nicht das, was Sie gefragt, aber in der Nähe fand ich so weit.