service - Angular 2 : Need to add provider in component for dependency on service?

Question

我在理解 Angular2 在依赖注入(inject)方面使用的逻辑时遇到了一些困难。这是我的情况:

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服务时需要呈现。由于分层注入(inject)器，在组件级别定义相应的提供程序不是强制性的。

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

bootstrap(AppComponent, [ Demo1Service, Data1Store ]);

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

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

Application
     |
AppComponent  --- Demo1Service --- Data1Store

在这样的应用中，我们有两个注入(inject)器:

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

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

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