Angular 2 appInjector 导致错误问题

发布于
2015-06-30

根据 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);