根據 https://angular.io/docs/js/latest/guide/displaying-data.html 一步一步做, 在引用類別上出了問題.
TypeScript 編譯:
tsc --watch -m commonjs
"compilerOptions": {
"emitDecoratorMetadata": true,
"module": "amd",
"target": "es5"
}
原始碼為:
/// <reference path="typings/angular2/angular2.d.ts" />
import {Component, View, bootstrap, NgFor} from 'angular2/angular2';
@Component({
selector: 'display',
appInjector: [FriendsService]
})
@View({
template: `
<p>My name is {{ myName }}</p>
<p>Friends:</p>
<ul>
<li *ng-for="#name1 of names">
{{ name1 }}
</li>
</ul>
`,
directives: [NgFor]
})
class DisplayComponent {
myName: string;
names: Array<string>;
constructor(friendsService: FriendsService) {
this.myName = 'Alice';
this.names = friendsService.names;
}
}
class FriendsService {
names: Array<string>;
constructor() {
this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];
}
}
bootstrap(DisplayComponent);
把 FriendsService 搬上去就可以了
https://github.com/kittencup/angular2-ama-cn/issues/11 有具體的解決方案