注射器不能在角度2.0中工作

时间:2015-05-14 14:20:15

标签: angular typescript1.5

我最近开始玩Angular2。我现在一直试图让注射剂工作半天左右,但我仍然无法弄清楚我做错了什么。

为了尽可能简单,我在官方网页上复制了来自5 Min Quickstart的代码。演示本身工作正常,但当我尝试使用注射剂时,我得到一个错误说

  

ORIGINAL ERROR:无法解析MyAppComponent的所有参数。使   确定它们都有有效的类型或注释。

我的打字稿文件

/// <reference path="typings/angular2/angular2.d.ts" />
import {Component, View, bootstrap,} from 'angular2/angular2';

class Names {}

// Annotation section
@Component({
    selector: 'my-app',
    injectables: [Names]
})
@View({
    template: '<h1>Hello {{ name }}</h1>'
})
// Component controller
class MyAppComponent {
    name: string;
    constructor(names: Names) {
        this.name = 'Alice';
    }
}

bootstrap(MyAppComponent);

P.S。与5 Min Quickstart中一样,我使用TraceurSystemJSAngular2 alpha (23)

有谁知道我错过了什么?

2 个答案:

答案 0 :(得分:12)

您的编译器不会向MyAppComponent添加参数属性(通过查看您的pluker)。我认为这是问题所在。如果你添加

MyAppComponent.parameters = [[Names]]
然后一切都会运作良好。

  1. Here是你的修补者。
  2. Here是TS中的相同示例(使用ES6)
  3. UPD 感谢@GrayFox指出了正确的方法(请参阅下面的评论):

      

    对于将来的引用 - 使用tsc时使用--emitDecoratorMetadata标志,或者如果您正在使用gulp-typescript

    ,请在配置中添加emitDecoratorMetadata: true

    请参阅TypeScript编译器选项here(您可以在那里找到emitDecoratorMetada

答案 1 :(得分:0)

把这个:

 <PropertyGroup Condition=" '$(Configuration)' == 'Debug' " >
   <DebugSymbols>true < /DebugSymbols>
   < TypeScriptRemoveComments > false < /TypeScriptRemoveComments>
   < TypeScriptSourceMap > true < /TypeScriptSourceMap>
   < TypeScriptAdditionalFlags > $(TypeScriptAdditionalFlags)--emitDecoratorMetadata < /TypeScriptAdditionalFlags>
 < /PropertyGroup>
 < PropertyGroup Condition= " '$(Configuration)' == 'Release' " >
   <DebugSymbols>true < /DebugSymbols>
   < TypeScriptRemoveComments > true < /TypeScriptRemoveComments>
   < TypeScriptSourceMap > false < /TypeScriptSourceMap>
   < TypeScriptAdditionalFlags > $(TypeScriptAdditionalFlags)--emitDecoratorMetadata < /TypeScriptAdditionalFlags>
 < /PropertyGroup>

到最后的* .njsproj文件中。