dependency-injection - Angular2 Beta 依赖注入(inject)

Question

我有一个加载 QApi 服务的 NavBar 组件，QApi 服务加载了 UserService，但我收到以下错误:

EXCEPTION: No provider for UserService! (NavBarComponent -> QApi -> UserService)

要么我根本不明白依赖注入(inject)的概念，我犯了一个愚蠢的错误，要么与 native 开发相比这只是一种复杂的方式...感谢您的帮助。

这是我的代码:

用户服务:

import {Injectable} from 'angular2/core';
//import {User} from '../data-source-mocks/users';

@Injectable() 
export class UserService {
 public isAuthenticated = true;
}

QApi 服务:

import {Injectable} from 'angular2/core';
import {UserService} from '../user/user.service';

@Injectable() 
export class QApi {

constructor(private _userService: UserService) {}

}

导航栏组件:

import {Component} from 'angular2/core';
import {QApi} from '../../services/q-api/q-api';

@Component({
 selector: 'nav-bar',
 template: `Test NavBar`,
 providers: [QApi]
})

export class NavBarComponent {
private _isAuthenticated = false;

constructor(private _QApi: QApi) {}
}

编辑:

首先:感谢所有出色的回答，每一个都帮助我更好地理解依赖注入(inject)，尤其是这篇文章:https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html

我将我的 QApi 类更改为:

import {Injectable, Inject, Injector} from 'angular2/core';
import {UserService} from '../user/user.service';
import {CardService} from '../card/card.service';

@Injectable()
export class QApi {

constructor() {
    var _injector = Injector.resolveAndCreate([UserService, 
                                               CardService]);

    this.userService = _injector.get(UserService);
    this.cardService = _injector.get(CardService);
}

}

现在它像我希望的那样工作了。非常感谢你们!

Answer 1

将UserService添加到组件providers:

@Component({
    selector: 'nav-bar',
    template: `Test NavBar`,
    providers: [QApi, UserService] // <- add UserService here
})
export class NavBarComponent { /* ... */ }

这里有两篇很好的文章，可以更好地理解 Angular2 依赖注入(inject):

• blog.thoughtram.io: Dependency Injection in Angular2
• blog.thoughtram.io: Injecting services in services in Angular 2