angular - 如何避免在 bootstrap() 函数中声明所有服务？

Question

所以根据我之前的问题:Angular2 "Services" how to @inject one service into another (singletons)

现在我有了答案，一个新问题突然出现在我的脑海中。这是因为到目前为止，我所看到的所有服务都包含在 Bootstrap 方法中。 Pascal Precht 的博文也表明了这一点:http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html

但对我来说(与 Angular1 相比)这是非常难看的编码。为了在这些情况下工作，我必须将我的所有服务包含在应用程序组件(Angular1 配置模块)中。虽然优势应该来自于让每个类“模块”负责获取其自己的依赖项(提供者)，这些依赖项在整个应用程序中都是单例的。

现在我的问题是:

是否可以让类指定它们自己的依赖关系，而依赖关系对于所有其他需要相同依赖关系的类来说仍然是单例。像这样的东西:

应用.ts

@Component({
  selector: 'app',
  providers: [
    TeamCollection
  ]
})
@View({
  template: '{{name}}'
})
class TestApp {
  name: string;
  teamCollection: TeamCollection;
  constructor(@Inject(TeamCollection) teamCollection: TeamCollection){
    this.name = 'Angular2';
    this.teamCollection = teamCollection;
  }
}

export function main() {
  bootstrap(TestApp);  
}

团队.ts

@Injectable()
export class TeamCollection extends BaseCollection {
    playerCollection: PlayerCollection;
    constructor(playerCollection: PlayerCollection) {
        super();
        this.playerCollection = playerCollection;
    }

    create(data: Object): TeamModel {
        return new TeamModel(data);
    }
}

播放器.ts

@Injectable()
export class PlayerCollection extends BaseCollection {
    create(data: Object): PlayerModel {
        return new PlayerModel(data);
    }
}

无需我将 TeamCollection 和 PlayerCollection 都包含在应用程序组件的提供程序数组中。而不是让 Teamcollection 在通过 App 组件提供程序数组创建 TeamCollection 单例实例时将 PlayerCollection 单例实例注入(inject)其构造函数。

对我来说这感觉真的很糟糕，但如果这是 Angular2 的方式，我将只需要学习适应它。

编辑: 我想通过说明这样一个事实来进一步解释这一点:如果我想要一个由应用程序中的所有组件共享的服务，我必须将它添加到 Bootstrap 方法中。在一个以前可能有 50 多个服务的项目中，这变得非常丑陋(如果它必须全部在引导函数中)。

另一件事:当您指定像 abc/... 这样的路由时，看到 @RouteConfig 会查看子类，这确实不一致> 这意味着组件 ABC 可以有自己的 @RouteConfig 等。 与我们必须在 config() 中指定所有内容的 Angular1 相比，这是一个很大的变化。

编辑2: 见@alexpods 评论: https://github.com/angular/angular/issues/5063#issuecomment-154753852

@EricMartinez 在下方发表评论。 查看在 angular2 中处理模块化的正确方法。

Answer 1

您可以将服务导出为单个 token ，并在 bootstrap() 中将它们作为集合提供，例如

a.js

export const MODULE_A: any[] = [Service1, Service2, Service3];

b.js

export const MODULE_B: any[] = [Service3, Service4, Service5];

c.js

import {MODULE_A} from 'a.js';    
import {MODULE_B} from 'b.js';

export const MODULE_C: any[] = [MODULE_A, Module_B, Service6];

ma​​in.js

import {MODULE_C} from 'c.js';

bootstrap(AppComponent, [MODULE_C];

这是 Angular2 中的常见做法，例如 ROUTER_PROVIDERS、MD_CARD_PROVIDERS、...