角2自定义服务未注入指令 [英] Angular 2 custom service not injected into a directive
问题描述
我已经app.component这样。
I have app.component like this.
import {Component} from "angular2/core"
import {HTTP_PROVIDERS} from "angular2/http"
import {ChartDataService} from '../service/chartData.service'
import {FilterService} from "../service/filter.service"
@Component({
selector: 'app',
template: `
<sidebar (filterChange)="onFilterChange($event)"></sidebar>
<div dsChart></div>
`,
directives: [SidebarComponent, ChartDirective],
providers: [HTTP_PROVIDERS, FilterService, ChartDataService],
styleUrls: ['app/main/app.component.css']
})
export class AppComponent {
//some more code
}
chartData.service.ts:
chartData.service.ts:
import {Injectable} from 'angular2/core'
import {Http, Response, Headers, RequestOptions, RequestMethod} from 'angular2/http'
import {Url} from '../url'
import {FilterModel} from '../model/filter.model'
import {INode} from "../model/node.model"
@Injectable()
export class ChartDataService {
constructor(private _http: Http) {
this._headers.append('Content-Type', 'application/json');
}
getData(model?: FilterModel) {
}
}
然后我尝试使用ChartDataService里面chart.directive,这是一个子组件app.component。 chart.directive.ts:
Then I try to use ChartDataService inside chart.directive, which is a child component to app.component. chart.directive.ts:
import {Directive, ElementRef, Input, OnInit} from 'angular2/core'
import {ChartDataService} from "../service/chartdata.service"
@Directive({
selector: '[dsChart]'
})
export class ChartDirective implements OnInit {
constructor(
private el: ElementRef,
private _dataService: ChartDataService) {
}
ngOnInit() {
this._dataService.getData()
.then(node => this._render(node))
.catch(error => { throw error });
}
private _render(root: INode) {}
}
但它没有通过的文档的每个组件具有在组件级范围创建依赖注射器。如果有不使用任何适当的组件级供应商父组件的供应商。这工作正常上课与 @Component()
装饰。添加提供商:[ChartDataService]
到 @Directive
声明帮助,但是这意味着每一个装饰将有<$的单独的实例C $ C> ChartDataService 这是undesiarable。
But it fails with Via the docs each component has an injector which creates dependencies at a component level scope. If there are no any appropriate component level providers parent component's provider is used. This works fine for classes with @Component()
decorator. Adding providers: [ChartDataService]
to @Directive
declaration helps, but that means each decorator will have separate instance of ChartDataService
which is undesiarable.
任何想法?或者设计是什么呢?
Any ideas? Or is it by design?
推荐答案
这可能是一个问题与进口秩序......如果 app.component.ts
你进口 ChartDirective
在 ChartDataService
你可能会得到你所提到的错误:
This could be an issue with order of imports... If in app.component.ts
you import ChartDirective
before ChartDataService
you might get an error you mentioned:
没有供应商ChartDataService! (ChartDirective - > ChartDataService)
No provider for ChartDataService! (ChartDirective -> ChartDataService)
您应该导入子组件/指令导入之前使用组件本身的服务:
You should import services that child components/directives use before importing component itself:
// no error
import {ChartDataService} from '../service/chartData.service'
import {ChartDirective} from '../chart.directive'
// can cause an error
import {ChartDirective} from '../chart.directive'
import {ChartDataService} from '../service/chartData.service'
我无法在这里重现此问题: http://plnkr.co/edit/NoZJnCMlqKkOMm5erfDW ,但我可以肯定,它可以发生:
I was unable to reproduce this issue here: http://plnkr.co/edit/NoZJnCMlqKkOMm5erfDW, but I can confirm it can happen:
// routes.ts
// no error
export {SettingsRoute} from './routes/settings/settings.route'
export {RootRoute} from './routes/root/root.route'
// this causes error
// export {RootRoute} from './routes/root/root.route'
// export {SettingsRoute} from './routes/settings/settings.route'
// root.route.ts
import {SettingsRoute} from './routes'
@RouteConfig([
{ path: '/settings/...', name: 'Settings', component: SettingsRoute },
])
export class RootRoute {...}
这篇关于角2自定义服务未注入指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!