Angular2：需要在组件中添加提供者以依赖服务？

Question

我在理解 Angular2 在依赖注入方面使用的逻辑时遇到了一些麻烦。这是我的情况：

app.component.ts：

import {Component} from 'angular2/core';
import {Demo1Service} from './demo-1.service';

@Component({
    selector: 'app',
    template: `<div>test template</div>`,
    providers: [Demo1Service]
})
class AppComponent {
    constructor(private _demo1Service: Demo1Service) {}
}

export {AppComponent};

demo-1.service.ts

import {Injectable} from 'angular2/core';
import {Data1Store} from './data-1.store';

@Injectable()
class Demo1Service {
    constructor(private _data1Store: Data1Store) {}
};

export {Demo1Service};

data-1.store.ts

import {Injectable} from 'angular2/core';

@Injectable()
class Data1Store {}

export {Data1Store};

http://plnkr.co/edit/4aBNbAxtHbUvVqxPRUbv?p=preview

如果你运行这个 plunker，你会看到 Angular 需要一个提供者，以便在 AppComponent 中定义 Data1Store。为了有一些关注点分离，我希望 AppComponent 不需要知道 Data1Store 的存在。

我在这里有什么事吗？

Answer 1

其实在执行Demo1Service服务时需要提供者提供。由于采用分层注入器，因此不必在组件级别定义相应的提供程序。

这也可以在整个应用程序或父注入器中完成。在引导您的应用程序时定义此提供程序似乎是您需要的：

bootstrap(AppComponent, [ Demo1Service, Data1Store ]);

这样您就不需要在组件的providers 属性中定义服务提供者

以下是所有这些元素及其关系的概述：

Application
     |
AppComponent  --- Demo1Service --- Data1Store

在这样的应用程序中，我们有两个注入器：

• 可以使用bootstrap函数的第二个参数配置的应用程序注入器

• 可以使用该组件的providers 属性配置的AppComponent 注入器。它可以“看到”应用程序注入器中定义的元素。这意味着如果在此提供程序中找不到提供程序，它将自动在此父注入器中查找。如果在后者中找不到，则会抛出“provider not found”错误。 这个问题可以为您提供有关 Angular 的分层注入器如何工作的更多详细信息：

• What's the best way to inject one service into another in angular 2 (Beta)?