使用TypeScript 1.5進行Angular 2服務注入

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。

我試圖注入Greeting中使用組件注解服務hostInjector ， injectibles和appInjector 。 我也嘗試將它添加到bootstrap調用的第二個參數中，如bootstrap(HelloWorld, [Greeter]) 。

在所有情況下，嘗試在瀏覽器中運行時都會收到此錯誤消息：

Token（ComponentRef）實例化期間出錯！ ORIGINAL ERROR：無法解析HelloWorld（？）的所有參數。 確保它們都具有有效的類型或注釋。

當然，如果我從構造函數中刪除greeter: Greeter參數，那么所討論的錯誤就會消失，並被鏈中的其他預期錯誤所取代。

想法？

編輯

我更新了這個問題的標題，以指定我使用的是TypeScript 1.5

Answer 1

當使用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"
    }
}

之后，你可以像你已經完成的那樣，將appInjector: [Greeter]添加到你的@Component聲明中，或者添加到bootstrap聲明中：

bootstrap(HelloWorld, [Greeter]);

Answer 2

關於TS2348。 我得到了同樣的錯誤。 擺脫了ComponentAnnotaion和ViewAnnotation，這有助於：

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

Answer 3

我希望你的代碼在typescript 1.5版本中運行良好。 現在，您應該在typescript 1.5.0-beta中使用Inject annotation。

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 4

這是代碼，直接用於注入服務的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 5

解決方案比解決方案更多，但是如果將服務定義移動到單獨的文件（greeting.ts），並導入它

import {Greeting} from 'greeting';

然后注射器正常工作。 這是使用命令行中的tsc構建的（取自angular.io上的5分鍾快速入門）

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

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