javascript - 使用 TypeScript 1.5 的 Angular 2 服务注入(inject)

Question

我正在尝试为 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 在组件注释中注入(inject) Greeting 服务。我还尝试将它添加到 Bootstrap 调用的第二个参数中，如 bootstrap(HelloWorld, [Greeter])。

在所有情况下，当我尝试在浏览器中运行它时都会收到此错误消息:

Token(ComponentRef) 实例化期间出错!。原始错误:无法解析 HelloWorld(?) 的所有参数。确保它们都具有有效的类型或注释。

当然，如果我从构造函数中删除 greeter: Greeter 参数，所讨论的错误就会消失，并被链中更下游的其他预期错误所取代。

想法？

编辑

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

Answer 1

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

您需要告诉 typescript 编译器导出元数据，以便 DI 注入(inject)器知道该做什么。我通过将 emitDecoratorMetadata 和 experimentalDecorators 添加到我的 tsconfig.json 来做到这一点:

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

之后，您可以将 appInjector: [Greeter] 添加到您的 @Component 声明中，就像您所做的那样，或者添加到 Bootstrap 声明中:

bootstrap(HelloWorld, [Greeter]);