注射剂不是在角工作2.0 [英] Injectables not working in angular 2.0

问题描述

最近，我开始用 Angular2 播放。我一直试图让注射到现在大约半天的工作，但我还是无法弄清楚我在做什么错。

要保持尽可能简单，我复制code从 5闵快速入门在官方网页。演示本身工作正常，但是当我尝试使用注射剂，我得到一个错误说

  

原来的错误：无法解析的所有参数MyAppComponent。使
  确保他们都有有效的类型或注释。

我的打字稿文件

///＆lt;参考路径=分型/ angular2 / angular2.d.ts/＆GT;
进口{组件，视图，引导，从}'angular2 / angular2';类名{}//注释部分
@零件（{
    选择：我的应用，
    注射：[名]
}）
@视图（{
    模板：'＆LT; H1＆GT;您好{{名}}＆LT; / H1＆GT;'
}）
//组件控制器
类MyAppComponent {
    名称：字符串;
    构造函数（名称：名称）{
        this.name ='爱丽丝';
    }
}引导（MyAppComponent）;


P.S。正如 5闵快速入门，我使用 Traceur ， SystemJS 和 Angular2α（23）

有谁知道我错过了什么？

解决方案

您的编译器不参数属性添加到 MyAppComponent （从看你的pluker ）。我想，这就是问题所在。如果添加

MyAppComponent.parameters = [[名]


那么所有的意志效果很好。

1. 这里是解决您的plunker。


2. 这里是在TS（与ES6）相同的例子

UPD 感谢@GrayFox您指出正确的方法（见注释波纹管）：

  到配置如果属实：

以备将来参考 - - 使用 emitDecoratorMetadata 使用时，TSC或添加 emitDecoratorMetadata标志您正在使用一饮而尽，打字稿

请参阅打字稿编译器选项这里（你可以找到 emitDecoratorMetada 那里）。

I recently started playing with Angular2. I've been trying to get injectables to work for about half a day now, but I still can't figure out what I'm doing wrong.

To keep it as simple as possible, I copied code from 5 Min Quickstart in the official webpage. Demo itself works fine, but when i try to use injectables, I get an error saying

ORIGINAL ERROR: Cannot resolve all parameters for MyAppComponent. Make sure they all have valid type or annotations.

My typescript file

/// <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. As in the 5 Min Quickstart, I'm using Traceur, SystemJS and Angular2 alpha (23)

Does anyone know what I'm missing?

解决方案

Your compiler does not add parameters properties to the MyAppComponent (from looking at your pluker). I think this is the problem. If you add

MyAppComponent.parameters = [[Names]]

then all will works well.

1. Here is your plunker with fix.
2. Here is the same example in TS (with ES6)

UPD Thanks to @GrayFox for pointing out the correct way (see the comment bellow):

For future references - use --emitDecoratorMetadata flag when using tsc or add emitDecoratorMetadata: true to the configuration if you're using gulp-typescript

See TypeScript compiler options here (you can find emitDecoratorMetada there).

这篇关于注射剂不是在角工作2.0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！