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依赖注入的文章：

Answer 2

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

您需要定义服务：

申请级别。在bootstrap函数的第二个参数内。它包含可用于整个应用程序的提供程序列表。
```
bootstrap(App, [UserService, QApi, ...]);
```
组件级。在providers注释的Component属性中。在这种情况下，仅为此组件配置，您需要为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

然后，您将拥有应用程序其余部分可用的每个服务的单个实例。

Angular2 Beta依赖注入

3 个答案: