Service Angular2:需要在组件中添加提供者以依赖于服务吗?
我在理解Angular2在依赖注入方面使用的逻辑时遇到了一些困难。这就是我的情况: app.component.ts:Service Angular2:需要在组件中添加提供者以依赖于服务吗?,service,dependency-injection,typescript,ecmascript-6,angular,Service,Dependency Injection,Typescript,Ecmascript 6,Angular,我在理解Angular2在依赖注入方面使用的逻辑时遇到了一些困难。这就是我的情况: app.component.ts: import {Component} from 'angular2/core'; import {Demo1Service} from './demo-1.service'; @Component({ selector: 'app', template: `<div>test template</div>`, providers
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};
data-1.store.ts
import {Injectable} from 'angular2/core';
import {Data1Store} from './data-1.store';
@Injectable()
class Demo1Service {
constructor(private _data1Store: Data1Store) {}
};
export {Demo1Service};
import {Injectable} from 'angular2/core';
@Injectable()
class Data1Store {}
export {Data1Store};
如果运行此plunker,您将看到Angular需要一个提供程序,以便在AppComponent中定义Data1Store。为了分离关注点,我希望AppComponent不需要知道Data1Store的存在
有什么我在这里吗?事实上,提供者需要在执行
Demo1Service
服务时显示。由于分层结构,在组件级别定义相应的提供程序不是强制性的
这也可以在整个应用中或在主喷油器内完成。在引导应用程序时定义此提供程序似乎是您所需要的:
bootstrap(AppComponent, [ Demo1Service, Data1Store ]);
这样,您就不需要在组件的providers
属性中定义服务提供者
以下是所有这些要素及其关系的概述:
Application
|
AppComponent --- Demo1Service --- Data1Store
在这种应用中,我们有两个喷油器:
- 可使用
引导功能的第二个参数配置的应用程序注入器
- 可使用此组件的
属性配置的providers
喷油器。它可以“查看”应用程序中定义的元素。这意味着,如果在此提供程序中找不到提供程序,将自动在此父注入器中查找该提供程序。如果未在后者中找到,将抛出“未找到提供程序”错误。 此问题可以为您提供有关角度如何工作的更多详细信息:AppComponent