【问题标题】：Specify providers at service in Angular 2在 Angular 2 中指定服务提供商
【发布时间】：2016-06-05 01:38:57
【问题描述】：

我正在尝试使用 Angular 2 的 DI 系统来自动处理我的服务的依赖关系。我想在服务本身上使用注解，而不是使用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 中有一个注释，告诉 Angular 注入 RoleStore。

类似@Provide( RoleStore ) class UserStore {}。

有什么建议吗？

【问题讨论】：

有一个 pull request 可以执行此操作或类似操作，但它已作为某种待机而关闭。
对不起，我没有说清楚 :(。那个 PR 没有被接受。你可以在同一个问题上问他们是否会重新考虑。
@EricMartinez 不用担心，我理解你（我只是做得很糟糕，让 我自己 变得清晰；））！我相信升级到 alpha-44 不会有什么坏处。如果它碰巧解决了这个问题，那就太好了。否则，我会调查原始问题，看看是否可以恢复它。
现在我们处于测试阶段，我仍然遇到同样的问题。我想象一个具有 100-300 个服务的非常大的应用程序 - 它们都应该作为参数插入到引导过程中吗？
我遇到了同样的问题，我希望为 typescript 实现 @Injectable 的角度，并添加类似 components has @Injectable({ providers: ['RoleStore '] );

标签： angular

【解决方案1】：

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

我承认这不是你要求的，而是我目前找到的最接近的。

【讨论】：

【解决方案2】：

您总是必须在某个级别上注册providers，在您的情况下，在组件级别注册它们会更有意义，以便在那里指定依赖项而不是在整个应用程序级别。像这样的...

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

这是官方的做事方式，将依赖项手动注册到 Angular 2 DI 机制中尽可能具体的级别。

话虽如此，您需要编写自己的编译时/运行时 (init) 工具，该工具将遍历代码收集所有 @Injectable 服务并将它们注册到 Angular 2 上下文中（使用 providers）

【讨论】：