Angular2 Beta依赖注入

Question

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

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

要么我根本没有得到依赖注入的概念，我犯了一个愚蠢的错误，或者这只是复杂的方式与本机开发相比...感谢您的帮助。

这是我的代码：

UserService：

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) {}

}

NavBar组件：

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) {}
}

编辑：

首先：感谢你们给出了很好的答案，每一个人都帮助我更好地理解依赖注入，特别是这篇文章： 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依赖注入：

• blog.thoughtram.io:Angular2中的依赖注入
• blog.thoughtram.io：在Angular 2中注入服务中的服务

Answer 2

事实上以前的两个回答都是真的！ ;-)

您需要定义服务：

• 申请级别 。 在bootstrap函数的第二个参数内。 它包含可用于整个应用程序的提供程序列表。

   bootstrap(App, [UserService, QApi, ...]); 

• 组件级别 。 在Component注释的providers属性中。 在这种情况下，仅为此组件配置，您需要为QApi服务的每个组件定义此组件。

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

你也混合了一些东西。 我的意思是你可以将UserService提供者放在应用程序级别，将QApi放在组件级别。 事实上，重要的是Angular可以在处理链中找到所有相关元素的提供者（使用依赖注入）。 它们可以来自组件级别（第一级）或应用程序级别（第二级）。

希望它给你一些额外的提示下alexpods和MichaelOryl伟大的答案;-)

蒂埃里

Answer 3

列出引导程序调用中的服务（无论您在何处处理）。 像下面这样的东西应该工作：

bootstrap(App, [UserService, QApi, COMMON_DIRECTIVES, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, HTTP_PROVIDERS]); 
providers// directives added here are available to all children

然后，您将为应用程序的其余部分提供每个服务的单个实例。