Angular：如何使用appInject注入服务到组件中？

我跟随谷歌的angular2 quick start（这些例子没有Github ?!）Angular：如何使用appInject注入服务到组件中？

一切工作顺利，直到是时候注入服务。

这是我的代码：

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

class FriendsService { 
    names: Array<string>; 

    constructor(){ 
     this.names = ['Aviad', 'Chen', 'Yarden']; 
    } 
} 

@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] 
}) 

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

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

我遇到了很多例外情况，但第一个和我认为是最相关的是：

可能相关

EXCEPTION: No provider for FriendsService! (DisplayComponent -> FriendsService) angular2.dev.js:22367 STACKTRACE: angular2.dev.js:22367 Error: DI Exception 

    at NoBindingError.BaseException (angular2.dev.js:7735) 
    at NoBindingError.AbstractBindingError (angular2.dev.js:9029) 
    at new NoBindingError (angular2.dev.js:9052) 
    at Injector.execute._proto._throwOrNull (angular2.dev.js:27552) 
    at Injector.execute._proto._getByKeyDefault (angular2.dev.js:27597) 
    at Injector.execute._proto._getByKey (angular2.dev.js:27545) 
    at Injector.execute._proto._getByDependency (angular2.dev.js:27533) 
    at Injector.execute._proto._instantiate (angular2.dev.js:27430) 
    at Injector.execute._proto._new (angular2.dev.js:27403) 
    at InjectorInlineStrategy.execute.protoStrategy.instantiateBinding (angular2.dev.js:27192) angular2.dev.js:22367 ERROR CONTEXT:

一件事是<display>组件是<my-app>组件的指令：

import {Component, View, bootstrap} from 'angular2/angular2'; 
import DisplayComponent from './show-properties'; 

@Component({ 
    selector: 'my-app' 
}) 
@View({ 
    template: '<display>', 
    directives: [DisplayComponent] 
}) 
class AppComponent { } 

bootstrap(AppComponent);

来源

2015-09-27 Shikloshi

这样做：

@Component({ 
    selector: 'display', 
    bindings: [FriendsService] // instead of appInjector 
})

当其他东西保持与上述相同。

反正根据changelog这是一个重大更改（感谢jesse Good）：

重大更改

的appInjector属性已被删除。相反使用viewInjector或hostInjector。

我想Angular2快速入门指南并不像我想的那样是最新的。

来源

2015-09-27 13:10:28 Shikloshi

刚才发布了一个答案。我建议阅读[changelog]（https://github.com/angular/angular/blob/master/CHANGELOG.md）。 'appInjector'在'alpha-29'中被删除，当前是'alpha-37'。正如你所看到的那样，它们在文档中被隐藏了）。（开发人员都知道这一点，并正在努力改善现在） –

我期待他们相应地更新它;）但你是对的，谢谢你的提示 - 我一定会使用它现在。 – Shikloshi

Angular：如何使用appInject注入服务到组件中？

回答

相关问题