Angular 2 依赖注入答案

【问题标题】：Angular 2 Dependency InjectionAngular 2 依赖注入
【发布时间】：2016-02-15 11:44:42
【问题描述】：

我已经阅读了几篇关于依赖注入的文章，但似乎无法让它按照我认为的方式工作。根据我的阅读，您可以在类上使用 @Injectable 装饰器，然后像这样为 DI 创建元数据：

import {Hero} from './hero.model';
import {Injectable} from 'angular2/angular2'

@Injectable()
export class HeroService {
    constructor() {
        console.log('Hero Service Created');
    }
}

然后在您的组件中，您可以在构造函数中使用它（通过正确的导入），如下所示：

constructor(heroService: HeroService) {
    console.log('App Component Created');
}

但是，我收到以下错误：无法解析 AppComponent(?) 的所有参数。确保它们都有有效的类型或注释。

如果我从服务中删除 @Injectable 语法，而是让我的构造函数像这样，我就能让它正常工作：

constructor(@Inject(HeroService) heroService: HeroService) {
    console.log('App Component Created');
}

根据我读过的所有内容，它们应该做同样的事情，但事实并非如此。关于为什么的任何想法？我将 Typescript 1.6.2 与 VS 2013、angular 2 v2.0.0-alpha.46 和 systemjs v0.19.5 一起使用。

【问题讨论】：

标签： dependency-injection typescript angular typescript1.6

【解决方案1】：

确保您在 TypeScript 配置中指定了“emitDecoratorMetadata”选项。

【讨论】：

这也是我唯一能想到的。 @Rob 这是一个基本的 plunker，带有一个带有工作 DI 的简单服务。汽车组件使用汽车服务。 plnkr.co/edit/8ILuwhtxAP3g9o6u6jAQ?p=preview
这让我朝着正确的方向前进。由于我在 Visual Studio 中开发并让它编译我的 TS 文件，我不得不将它添加到我的 csproj 文件中： $(TypeScriptAdditionalFlags) --emitDecoratorMetadata
更好的是，将其添加到您的 csproj 文件中，以便它在保存时编译，而不仅仅是在构建时编译：true