javascript – 使用TypeScript 1.5进行Angular 2服务注入

我正在尝试为Angular 2设置一个非常基本的功能结构.它只有最基本的API元素,因此随着框架的发展,我可以推进我的结构.

目前,我在如何执行传递服务的简单行为方面已经结束了.以下是一些示例源代码,直接来自最新的DefinitelyTyped文件的注释：

class Greeter {
    greet(name: string) {
        return 'Hello ' + name + '!';
    }
}
@Component({
    selector: 'greet',
    appInjector: [Greeter]
})
@View({
    template: `{{greeter.greet('world')}}!`
})
class HelloWorld {
    greeter: Greeter;
    constructor(greeter: Greeter) {
        this.greeter = greeter;
    }
}
bootstrap(HelloWorld);

如您所见,我在此示例中使用的是Typescript 1.5.

我尝试使用hostInjector,injectibles和appInjector在Component注释中注入Greeting服务.我也尝试将它添加到bootstrap调用的第二个参数中,如bootstrap(HelloWorld,[Greeter]).

在所有情况下,尝试在浏览器中运行时都会收到此错误消息：

Token(ComponentRef)实例化期间出错！ ORIGINAL ERROR：无法解析HelloWorld(？)的所有参数.确保它们都具有有效的类型或注释.

当然,如果我从构造函数中删除greeter：Greeter参数,那么所讨论的错误就会消失,并被链中的其他预期错误所取代.

想法？

编辑

我更新了这个问题的标题,以指定我使用的是TypeScript 1.5

解决方法:

当使用typescript 1.5.0-beta和angular 2.0.0-alpha.28(不确定版本是否严格相关)和gulp时,我遇到了类似的问题.

您需要告诉typescript编译器导出元数据,以便DI注入器知道该怎么做.我这样做是通过将emitDecoratorMetadata和experimentalDecorators添加到我的tsconfig.json中：

{
    "compilerOptions": {
        "module": "commonjs",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "sourceMap": true,
        "target": "es5"
    }
}

之后,你可以像你已经完成的那样,将@Injector：[Greeter]添加到你的@Component声明中,或者添加到bootstrap声明中：

bootstrap(HelloWorld, [Greeter]);