Я играю с Angular2. В качестве основы я использовал проект quickstart из angular.io.
Все работает нормально, но как только я пытаюсь ввести службу (ItemService) в мой AppComponent, я получаю следующее исключение:
Ошибка при создании Token (ComponentRef)!. ОРИГИНАЛЬНАЯ ОШИБКА. Невозможно разрешить все параметры для AppComponent. Убедитесь, что все они имеют допустимый тип или аннотации.
Я видел похожие проблемы в Интернете (включая stackoverflow, например этот пост), но ни один из них, похоже, не решил мою проблему. Есть ли какие-либо идеи, какая проблема может быть?
Я также видел некоторые решения (например, те, что были в репо Angular2), которые украшают класс для инъекций с помощью Injectable -nnotation. Однако это не работает для меня, поскольку это не определено в angular.d.ts. Я использую неправильную версию?
Вы можете найти мое решение в следующем Plunker: http://plnkr.co/edit/7kK1BtcuEHjaspwLTmsg
Для записи вы также можете найти мои два файла ниже. Обратите внимание, что app.js из Plunker - это файл JavaScript, созданный из моего файла TypeScript ниже, исключение всегда одно и то же.
index.html:
<html>
<head>
<title>Testing Angular2</title>
<script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script>
<script src="https://jspm.io/[email protected]"></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);
Заранее благодарим за любые идеи!