Angular 2服务注入使用TypeScript 1.5

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); 

正如你所看到的，我使用的是打字稿1.5在这个例子中。

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

在任何情况下，我得到这个错误消息时试图在浏览器中运行它：

错误令牌（ComponentRef）的实例化过程中！ ORIGINAL ERROR：无法解析HelloWorld（？）的所有参数。确保他们都有有效的类型或注释。

当然，如果我从构造函数中删除greeter: Greeter参数，那么有问题的错误就会消失，并被其他预期的错误所取代。

想法？

编辑

我更新了这个问题的标题来指定，我现在用的打字稿1.5

Answer 1

下面是代码，直出plnkr.co模板的注射服务http://plnkr.co/edit/m5sHWWFmgYPrfsMv0u2r

import { 
    ComponentAnnotation as Component, 
    ViewAnnotation as View, bootstrap 
} from 'angular2/angular2'; 

@Component({ 
    selector: 'app', 
    viewInjector: [Service] 
}) 
@View({ 
    template: '{{greeting}} world!' 
}) 
class App { 
    constructor(service: Service) { 
    this.greeting = service.greeting(); 
    setTimeout(() => this.greeting = 'Howdy,', 1000); 
    } 
} 

class Service { 
    greeting() { 
    return 'Hello'; 
    } 
} 

bootstrap(App); 

Answer 2

关于TS2348。我得到了同样的错误。摆脱ComponentAnnotaion和ViewAnnotation的，这有助于：

import { 
    bootstrap, 
    Component, 
    View 
} from 'angular2/angular2'; 

Answer 3

使用打字稿1.5.0-β和角度2.0.0 alpha.28（不知道的版本是严格相关的）与我有类似的问题一饮而尽。

您需要告诉打字稿编译器导出元数据，以便DI注入器知道该怎么做。

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

之后，你可以添加appInjector: [Greeter]您@Component声明，就像你做或引导声明：

bootstrap(HelloWorld, [Greeter]); 

Answer 4

更多我加入emitDecoratorMetadata和experimentalDecorators我tsconfig.json这样做一种解决方法，而不是解决方案，但如果您将服务定义移至单独的文件（greeting.ts），并导入它

import {Greeting} from 'greeting'; 

然后喷油器工作正常。这是使用命令行中的tsc（从角度5分钟快速入门获取的）。io）

tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts 

Answer 5

我希望你的代码能在打字稿1.5版本中正常工作。现在，您应该在typescript 1.5.0-beta中使用Inject注释。

import { 
    ComponentAnnotation as Component, 
    ViewAnnotation as View, bootstrap, 
    Inject 
} from 'angular2/angular2'; 

@Component({ 
    selector: 'app', 
    hostInjector: [Service] 
}) 
@View({ 
    template: '{{greeting}} world!' 
}) 
class App { 
    constructor(@Inject(Service)service: Service) { 
    this.greeting = service.greeting(); 
    setTimeout(() => this.greeting = 'Howdy,', 1000); 
    } 
} 

class Service { 
    greeting() { 
    return 'Hello'; 
    } 
} 

bootstrap(App); 

Answer 6

随着angular2.0.0-alpha.32我做到了这一点与

/// <reference path="../../typings/angular2/angular2.d.ts" /> 

import {Component, View, bootstrap, NgFor} from 'angular2/angular2'; 
import {MyService} from 'js/services/MyService'; 

// Annotation section 
@Component({ 
    selector: 'my-app', 
    viewInjector: [MyService] 
}) 
@View({ 
    templateUrl: 'templates/my-app.tpl.html', 
    directives: [NgFor] 
}) 

class MyComponent { 
    mySvc:MyService; 

    constructor(mySvc:MyService) { 
     this.mySvc = mySvc; 
    } 

    onInit() { 
     this.mySvc.getData(); 
    } 
} 

bootstrap(MyComponent, [MyService]);