Укажите поставщиков услуг в Angular 2

Question

Я пытаюсь использовать систему DI Angular 2, чтобы автоматически обрабатывать зависимости моих сервисов. Я хотел бы использовать аннотацию на самой службе, вместо того, чтобы использовать второй параметр bootstrap(), чтобы указать все инъекционные услуги.

Что у меня есть

Служба низкоуровневого:

services/role-store.ts

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

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

Сервис высокого уровня, который зависит от службы низкоуровневого:

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

Компонент, который зависит от службы высокого уровня:

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

Корневой компонент для начальной загрузки:

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]); 

Проблему

bootstrap(App, [RoleStore]) работает, но я предпочел бы аннотацию в user-store.ts, которая сообщает Угловому, чтобы ввести RoleStore.

Нечто вроде @Provide(RoleStore) class UserStore {}.

Любые советы?

Answer 1

Вам всегда нужно зарегистрировать providers на каком-то уровне, в вашем случае было бы более целесообразно зарегистрировать их на уровне компонента, чтобы указать зависимость, а не на всем уровне приложения. Что-то вроде этого ...

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

Это официальный способ делать вещи, что зависимость вручную, зарегистрированную в угловой механизм 2 DI на самом конкретном уровне возможно.

Это, как говорится, вам нужно будет написать свой собственное время компиляции/выполнение (INIT) инструмент, который будет проходить код собрать все @Injectable услуги и зарегистрировать их в угловой 2 контекста для вас (с помощью providers)

Answer 2

providers на услуги не поддерживаются https://github.com/angular/angular/issues/5622

что вы можете сделать вместо этого создает массивы провайдеров, которые экспортируются как «модули»

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

и п в модулях, которые используют службу Rolestore

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

, а затем использовать его в загрузчике

bootstrap(AppComponent, [PARENT_PROVIDERS]); 

Я признаю, что это не то, что вы просили, но ближе всего я нашел до сих пор.