Angular 2自定义服务未注入指令

我有这样的app.component

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
}

然后我尝试在chart.directive中使用ChartDataService，它是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]

添加到

@指令

声明有帮助，但这意味着每个装饰器都将有单独的

ChartDataService

实例，这是不可引用的

---

有什么想法吗？还是出于设计？

我忘了提到我使用的是beta.7。更新到beta.8后，问题消失。

这可能是导入顺序的问题。。。如果在

app.component.ts

中，在

ChartDataService

之前导入

ChartDirective

，则可能会出现您提到的错误：

ChartDataService没有提供程序！（ChartDirective->ChartDataService）

在导入组件本身之前，应导入子组件/指令使用的服务：

// 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'

我无法在此复制此问题：，但我可以确认它可能发生：

// 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 {...}

---

很好，因为我不知道为什么它对您不起作用。重新订购导入后，我没有任何变化。

// 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 {...}