私はAngular2で遊んでいます。基本として、angular.ioページのクイックスタートプロジェクトを使用しました。
ItemServiceすべてが正常に動作しているように見えますが、サービス ( ) を自分に挿入しようとするとすぐに、AppComponent次の例外が発生します。
Token(ComponentRef)! のインスタンス化中にエラーが発生しました。元のエラー: AppComponent のすべてのパラメーターを解決できません。すべてに有効な型または注釈があることを確認してください。
インターネットで同様の問題を見たことがあります (この投稿などのスタックオーバーフローを含む) が、どれも私の問題を解決していないようです。何が問題なのか、何らかの考えを持っている体はありますか？
注入可能なクラスを - 注釈で装飾するいくつかのソリューション (たとえば、Angular2 リポジトリのもの) も見てきましたInjectable。ただし、 で定義されていないため、これは機能しませんangular.d.ts。間違ったバージョンを使用していますか?
次の Plunker で私の解決策を見つけることができます: http://plnkr.co/edit/7kK1BtcuEHjaspwLTmsg
記録として、私の 2 つのファイルを以下に示します。app.jsPlunker の は、以下の TypeScript ファイルから生成された JavaScript ファイルであることに注意してください。例外は常に同じです。
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);
アイデアをお寄せいただきありがとうございます。