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

在组件注释中注入

Greeting

服务。我还尝试将其添加到bootstrap调用的第二个参数中，如在

bootstrap（HelloWorld，[Greeter]）

中

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

令牌（ComponentRef）实例化期间出错！。原始错误：无法解析HelloWorld（？）的所有参数。确保它们都具有有效的类型或批注。

当然，如果我从构造函数中删除了

greeter:greeter

参数，那么所讨论的错误就会消失，并被后续的其他预期错误所取代

想法

编辑

---

我更新了这个问题的标题，指定我使用的是TypeScript 1.5，这是直接从plnkr.co模板中获取的用于注入服务的代码

---

关于TS2348。我也犯了同样的错误。摆脱了ComponentAnnotation和ViewAnnotation，这有助于：

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

---

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

您需要告诉typescript编译器导出元数据，以便DI注入器知道该做什么。为此，我在tsconfig.json中添加了

emitDecoratorMetadata

和

experimentalDecorators

：

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

之后，您可以像以前一样将

appInjector:[问候者]

添加到

@组件

声明或引导声明中：

bootstrap(HelloWorld, [Greeter]);

---

与其说是解决方案，不如说是一种变通方法，但如果您将服务定义移动到一个单独的文件（greeting.ts）并导入它

import {Greeting} from 'greeting';

然后喷油器正常工作。这是使用命令行中的tsc构建的（取自angular.io上的5分钟快速启动）

---

我希望您的代码在TypeScript1.5版本中能够正常工作。现在，您应该在typescript 1.5.0-beta中使用InjectAnnotation

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

---

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

//
从'angular2/angular2'导入{组件、视图、引导、NgFor}；
从'js/services/MyService'导入{MyService}；
//注释部分
@组成部分({
选择器：“我的应用程序”，
viewInjector:[MyService]
})
@看法({
templateUrl:'templates/my app.tpl.html'，
指令：[NgFor]
})
类MyComponent{
mySvc:MyService；
构造函数（mySvc:MyService）{
this.mySvc=mySvc；
}
onInit（）{
this.mySvc.getData（）；
}
}   
引导（MyComponent，[MyService]）；

它使用的是Angular 2的哪个版本？你能为plnkr提供一个链接吗？将其添加到应答器中这在plunker中确实有效，但它不能作为TypeScript 1.5工作。我首先得到的错误之一是“typeof ComponentAnnotation”类型的TS2348值不可调用。你的意思是包括“新”吗？这可能是打字问题吗？请注意，我在文件前面加了一个

///引用路径

，该路径指向最新的定义类型angular2.d.ts文件。仅供现在阅读此文件的人参考。。。hostInjector和viewInjector不再处于角度2。他们最后一次提到的是Angular 2 Alpha release 31的更改日志。谢谢，删除了TS2348错误，但产生了与上面识别的相同的错误。您是否使用Angular 2.0.0-alpha.27？TypeScript 1.5？找到解决方案了吗？还没有。错误仍然存在。我还在想这是否是一个类型定义问题。这看起来很有希望。一旦我能够让Visual Studio 2015 RC接受这些值，我会让您知道它是否适合我。谢谢Paul，但该解决方案不适合我。我用

@Component

中的

appInjector

和

hostInjector

和

@View

中的

viewInjector

以及

引导（HelloWorld，[Greeter]）

进行了尝试。您是否使用Angular 2.0.0-alpha.28和TypeScript 1.5.0-beta？另外，我想确认一下，我示例中的服务是

Greeter

。主引导对象是

HelloWorld

。这就是你真正的意思吗？@PeteGardner验证了我的版本与你的版本相同，并更新了我的答案（希望）澄清了一些事情。仅供阅读本文的人参考。。。hostInjector和viewInjector不再处于角度2。他们最后一次提到的是Angular 2 Alpha 31版的更改日志。仅供现在阅读本文的人参考。。。hostInjector和viewInjector不再处于角度2。他们最后提到的是Angular 2 Alpha release 31的更改日志

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

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