2016年1月14日更新 - angular2@^2.0.0-beta.1

Question

我已经开始从angular.io学习Angular2了。我从本教程中学到了一个例子。

组件：

function FriendService (){
  this.friendList = ['Wam','Pam','Sam','Cam'];
}

function PersonalInfo (friends){
  this.myName="Jam";

}
PersonalInfo.annotations = [
  new angular.ComponentAnnotation({
    selector : 'app',
    injectables :[FriendService]
  }),
  new angular.ViewAnnotation({
    template:'<h3>{{myName}} Friend\'s</h3>'
  }) 
]; 
PersonalInfo.parameters =[[FriendService]];
document.addEventListener('DOMContentLoaded', function(){
  angular.bootstrap(PersonalInfo);
})

查看：

  <body>
    <app></app>
  </body>

这里我已将FriendService注入组件，并将参数传递给PersonalInfo组件。但是它给出了错误：

没有FriendService的提供商！（PersonalInfo - ＆gt; FriendService）

任何人都对此错误有任何疑问？

Answer 1

2016年1月14日更新 - angular2@^2.0.0-beta.1

这是新语法。

function FriendService(){
  this.friendList = ['Wam','Pam','Sam','Cam'];
}

var PersonalInfo = ng.core
  .Component({
    selector: 'app',
    providers: [FriendService]
  })
  .View({
    template:'<h3>{{myName}} Friend\'s</h3>'
  })
  .Class({
    constructor: [FriendService, function(friends){
      this.myName="Jam";
    }]
  })

ng.platform.browser.bootstrap(PersonalInfo)

Answer 2

从Angular 2 alpha-25 +，Component.injectables变为Component.appInjector。

另外，我不确定参数是否需要双方括号。虽然我错了。您可能需要考虑使用A library在Angular中编写ES5注释。

尝试以下更改：

PersonalInfo.annotations = [
  new angular.ComponentAnnotation({
    selector : 'app',
    appInjector :[FriendService]    // injectables -> appInjector
  }),
  new angular.ViewAnnotation({
    template:'<h3>{{myName}} Friend\'s</h3>'
  }) 
]; 
PersonalInfo.parameters =[FriendService];  // [[]] -> []

错误：ES5 Angular2中没有提供服务的提供程序

2 个答案:

2016年1月14日更新 - angular2@^2.0.0-beta.1