Angular 在第2部分中指定服务提供程序

Angular 在第2部分中指定服务提供程序,angular,Angular,我正在尝试使用Angular 2的DI系统来自动处理服务的依赖关系。我希望在服务本身上使用注释,而不是使用bootstrap()的第二个参数来指定所有可注入的服务 我所拥有的 低级服务: services/role store.ts export class RoleStore { constructor() { // Initialize roles } getById( id ) { // accepts id, returns role object }

我正在尝试使用Angular 2的DI系统来自动处理服务的依赖关系。我希望在服务本身上使用注释,而不是使用
bootstrap()
的第二个参数来指定所有可注入的服务

我所拥有的 低级服务:

services/role store.ts

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

  getById( id ) {
    // accepts id, returns role object
  }
};
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;
  }
};
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...
}
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] );
依赖于低级服务的高级服务:

services/user store.ts

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

  getById( id ) {
    // accepts id, returns role object
  }
};
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;
  }
};
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...
}
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] );
依赖于高级服务的组件:

组件/用户目录ts

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

  getById( id ) {
    // accepts id, returns role object
  }
};
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;
  }
};
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...
}
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)类UserStore{}


有什么建议吗?

您必须始终在某个级别上注册
提供程序,在您的情况下,在组件级别上注册它们会更有意义,以便在组件级别上指定依赖项,而不是在整个应用程序级别上指定依赖项。像这样的

@Component({
  selector: 'user-dir',
  template: '<!-- inline template -->',
  directives: [CORE_DIRECTIVES]
  providers:  [UserStore, RoleStore]
})
export class UserDir {
  constructor( data: UserStore ) {
    this.userStore
  }
  // other methods...
}
@组件({
选择器:“用户目录”,
模板:“”,
指令:[核心指令]
提供者:[用户存储,角色存储]
})
导出类UserDir{
构造函数(数据:UserStore){
这个.用户商店
}
//其他方法。。。
}
这是官方的做法,依赖项在最具体的级别上手动注册到Angular 2 DI机制中


也就是说,您需要编写自己的编译时/运行时(init)工具,该工具将遍历代码收集所有@Injectable服务,并将它们注册到Angular 2上下文中(通过使用
提供程序

不支持服务上的提供程序

相反,您可以创建像“模块”一样导出的提供程序数组


我承认这不是你要求的,而是我迄今为止发现的最接近的。

有一家这样做或类似的公司,但它作为某种备用关闭了。对不起,我没有说清楚:(.公共关系没有被接受。你可以问同样的问题,如果他们会重新考虑。@EricMartinez别担心,我理解你的意思(我只是说得不清楚;))!我相信升级到alpha-44不会有什么坏处。如果它碰巧解决了问题,那就太好了。否则,我会调查原始问题,看看是否可以恢复它。现在我们处于测试阶段,我仍然有同样的问题。我想一个拥有100-300个服务的非常大的应用程序-它们都应该作为引导过程的参数插入吗?I r我希望angular实现@Injectable for typescript,并添加类似components的@Injectable({providers:['RoleStore']);