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