Question

我是一个新的角度世界。目前正在通过关注“https://angular.io/docs/ts/latest/guide/displaying-data.html”的文档进行学习。现在，我已经陷入了困境。

我有两个文件。 i - show-properties.html

<!DOCTYPE html>
<html>
    <head>
        <script src="../node_modules/traceur/bin/traceur-runtime.js"></script>
        <script src="../node_modules/es6-module-loader/dist/es6-module-loader.js"></script>
        <script src="../node_modules/systemjs/dist/system.src.js"></script>
        <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
    </head>

    <body>
        <display></display>

        <script>
            System.import('show-properties');
        </script>
    </body>
</html>

ii - show-properties.ts

import {Component, View, bootstrap, NgFor} from 'angular2/angular2';

@Component({
    selector: 'display',
    appInjector: [FriendsService]
})

@View({
    template: `
      <p>My name: {{ myName }}</p>
      <p>Friends:</p>
      <ul>
         <li *ng-for="#name of names">
            {{ name }}
         </li>
      </ul>
    `,
    directives: [NgFor]
})

class DisplayComponent {
    myName: string;
    names: Array<string>;

    // constructor() {
    //  this.myName = "Alice";
    //  this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
    // }

    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'类时，通过进行以下更改为模型提供朋友列表 -

class DisplayComponent {
    myName: string;
    names: Array<string>;

    // constructor() {
    //  this.myName = "Alice";
    //  this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
    // }

    constructor(friendsService: FriendsService) {
        this.myName = 'Alice';
        this.names  = friendsService.names;
    }
}

我在Chrome控制台中遇到以下错误。

任何人都帮我弄清楚这里出了什么问题。

Answer 1

appInjector was removed in alpha-29。现在，您必须使用bindings和viewBindings代替它：

@Component({
  selector: 'display',
  bindings: [FriendsService]
})
@View({
  // view ...
})
class DisplayComponent { /* component ... */ }

This plunker效果非常好。

Angular 2错误 - 令牌实例化期间出错（Promise <componentref>）！

1 个答案: