在Angular2注射剂 [英] Injectables in Angular2
问题描述
我玩弄Angular2。以此为基础，我用了快速入门项目从的 angular.io 页。
I am playing around with Angular2. As a basis, I used the quickstart project from the angular.io page.
一切似乎都做工精细，但只要我尝试注入服务（ ItemService ）到我的 AppComponent 我得到以下异常：
Everything seems to work fine, but as soon as I try to inject a service (ItemService) into my AppComponent I get following exception:
令牌（ComponentRef）的实例时出错！原来的错误：无法解析AppComponent所有参数。确保他们都有有效的类型或注释。
Error during instantiation of Token(ComponentRef)!. ORIGINAL ERROR: Cannot resolve all parameters for AppComponent. Make sure they all have valid type or annotations.
我也有类似的问题，互联网（包括计算器上，例如这帖子），但他们都不来解决我的问题。是否有任何身体有任何想法，问题可能是什么？
I have seen similar issues on the internet (including stackoverflow, for example this post), but none of them seem to solve my problem. Does any body have any idea, what the problem could be?
我也看到了一些解决方案（例如在Angular2回购的那些），其装饰与注射 -annotation注射类。然而，这不适合我的工作，因为它不是在 angular.d.ts 定义。我使用了错误的版本？
I have also seen some solutions (for example the ones in the Angular2 repo) which decorate the injectable class with the Injectable-annotation. However this doesn't work for me, as it is not defined in angular.d.ts. Am I using a wrong version?
您可以找到我在下面Plunker的解决方案：
http://plnkr.co/edit/7kK1BtcuEHjaspwLTmsg
You can find my solution in following Plunker: http://plnkr.co/edit/7kK1BtcuEHjaspwLTmsg
有关备案，也可以在下面找到我的两个文件。请注意， app.js 从Plunker是如下我打字稿文件生成的JavaScript文件，异常是永远不变的。
For the record, you can also find my two files below. Please note that the app.js from the Plunker is the JavaScript file generated out of my TypeScript file below, the exception is always the same.
index.html的：
<html>
<head>
<title>Testing Angular2</title>
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
<script src="https://jspm.io/system@0.16.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.23/angular2.dev.js"></script>
</head>
<body>
<app></app>
<script>
System.import('js/app');
</script>
</body>
</html>
JS / app.ts ：
/// <reference path="../../typings/angular2/angular2.d.ts" />
import {Component, View, bootstrap, For, If} from "angular2/angular2";
class Item {
id:number;
name:string;
constructor(id:number, name:string) {
this.id = id;
this.name = name;
}
}
class ItemService {
getItems() {
return [
new Item(1, "Bill"),
new Item(2, "Bob"),
new Item(3, "Fred")
];
}
}
@Component({
selector: 'app',
injectables: [ItemService]
})
@View({
template: `<h1>Testing Angular2</h1>
<ul>
<li *for="#item of items">
{{item.id}}: {{item.name}} |
<a href="javascript:void(0);" (click)="toggleSelected(item);">
{{selectedItem == item ? "unselect" : "select"}}
</a>
</li>
</ul>
<item-details *if="selectedItem" [item]="selectedItem"></item-details>`,
directives: [For, If, DetailComponent]
})
class AppComponent {
items:Item[];
selectedItem:Item;
constructor(itemService:ItemService) {
this.items = itemService.getItems();
}
toggleSelected(item) {
this.selectedItem = this.selectedItem == item ? null : item;
}
}
@Component({
selector: 'item-details',
properties: {
item: "item"
}
})
@View({
template: `<span>You selected {{item.name}}</span>`
})
class DetailComponent {
item:Item;
}
bootstrap(AppComponent);
在此先感谢您的任何想法！
Thanks in advance for any ideas!
推荐答案
检查两件事情： -
Check for couple of things:-
1）确保您使用的是从你的包位置安装打字稿（1.5.x版本的正确版本）。 （）如果您安装了打字稿的previous版本则使用仅仅台糖命令可以指向现有的（小于1.5），从环境的路径位置
1) Make sure you are using the correct version of typescript (1.5.x) installed from your package location. () If you have previous versions of typescript installed then merely using "tsc" command could be pointing to the existing (< 1.5) location from the environment path.
2）确保您使用 - emitDecoratorMetadata 标志与TSC命令。这是必要的，这样的JavaScript输出创建用于装饰的元数据。
2) Make sure you use --emitDecoratorMetadata flag with the tsc command. It is necessary so the javascript output creates the metadata for the decorators.
3）错误 - 无法读取未定义的属性'注解'
因为 AppComponent 指令对 DetailComponent 这尚未定义的依赖关系（由时间同步 __装饰（函数运行来解决依赖）和TS编译方式红旗变量 DetailComponent 为undefined，则（对于该IIFE下面是尚未运行）。尝试之前 AppComponent 移动 DetailComponent 的声明，或者只是把它移动到不同的文件并导入吧。
3) Error - Cannot read property 'annotations' of undefined
Because AppComponent directive has a dependency on DetailComponent which has not been defined yet (by the time the synchronous __decorate( function runs to resolve the dependencies) and the way TS compiles the hoisted variable DetailComponent is undefined then (The IIFE for that below is yet to run). Try moving the declaration of DetailComponent before AppComponent. Or just move it to a different file and import it.
@Component({
selector: 'item-details',
properties: {
item: "item"
}
})
@View({
template: `<span>You selected {{item.name}}</span>`
})
class DetailComponent {
item:Item;
}
@Component({
selector: 'app',
injectables: [ItemService]
})
@View({
template: `<h1>Testing Angular2</h1>
<ul>
<li *for="#item of items">
{{item.id}}: {{item.name}} |
<a href="#" (click)="toggleSelected(item);">
{{selectedItem == item ? "unselect" : "select"}}
</a>
</li>
</ul>
<item-details *if="selectedItem" [item]="selectedItem"></item-details>`,
directives: [For, If, DetailComponent]
})
class AppComponent {
items:Item[];
selectedItem:Item;
constructor(itemService:ItemService) {
this.items = itemService.getItems();
}
toggleSelected(item) {
this.selectedItem = this.selectedItem == item ? null : item;
return false;
}
}
bootstrap(AppComponent);
修改
由于角A26的，如果你面对方面问题，按照当前的文档（截至目前）<一个href=\"http://stackoverflow.com/questions/30770222/module-angular2-angular2-has-no-exported-member-for/30770446#30770446\">follow这个链接，如果它有助于因为有一些相关的变化。
As of angular a26 if you face issues with respect to following the current documentation (as of now) follow this link if it helps as there are some relevant changes.
这篇关于在Angular2注射剂的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
