Angular:如何使用appInject将服务注入组件? [英] Angular: How do I inject a service into a component using appInject?

问题描述

我正在关注Google的 angular2快速入门(这些示例没有Github吗?！)

I'm following google's angular2 quick start (no Github for these examples?!)

一切正常，直到需要注入服务为止.

Everything was working smoothly until it was time to inject a service.

这是我的代码:

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;
    }
}

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

I ran into a lot of exceptions but the first one and what I think is the most relevant is:

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> 组件的指令:

One thing that may be relevant is that the <display> component is a directive of the <my-app> component:

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

推荐答案

这可以解决问题:

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

其他任何与上相同的情况.

When anything else remained the same as above.

无论如何，根据更改日志，这是一个重大更改(谢谢杰西好):

Anyway according to the changelog this was a breaking change (thanks jesse Good):

BREAKING更改

appInjector属性已被删除.而是使用 viewInjector 或 hostInjector .

THe appInjector property has been removed. Instead use viewInjector or hostInjector.

我猜想《 Angular2快速入门》指南并没有我想象的那么新.

I guess that the Angular2 Quick Start guide is not as up to date as I thought.

这篇关于Angular:如何使用appInject将服务注入组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！