Angular 2-服务-来自另一个服务的依赖项注入

Question

我已经在Angular 2中编写了两个服务。其中之一是Http的基本自定义类，其中包含一些自定义功能（目前看来是基本的，但会不断扩展）：

ServerComms.ts

import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';

@Injectable()
export class ServerComms {
    private url = 'myservice.com/service/';

    constructor (public http: Http) {
        // do nothing
    }

    get(options) {
        var req = http.get('https://' + options.name + url);

        if (options.timout) {
            req.timeout(options.timeout);
        }

        return req;
    }
}

另一个类TicketService利用上面的此类，并调用服务中的方法之一。 定义如下：

票务服务

import {Injectable} from 'angular2/core';
import {ServerComms} from './ServerComms';

@Injectable()
export class TicketService {
    constructor (private serverComms: ServerComms) {
        // do nothing
    }

    getTickets() {
        serverComms.get({
            name: 'mycompany',
            timeout: 15000
        })
            .subscribe(data => console.log(data));
    }
}

但是，无论何时尝试此操作，我都会收到以下错误：

"No provider for ServerComms! (App -> TicketService -> ServerComms)"

我不理解为什么？ 当然，我不需要注入彼此依赖的每项服务吗？ 这会变得很乏味吗？ 这在Angular 1.x中是可以实现的-如何在Angular 2中实现相同的目标？

这是正确的方法吗？

Answer 1

简而言之，由于注入器是在组件级别定义的，因此发起呼叫服务的组件必须查看相应的提供者。 第一个（直接调用），但另一个间接调用（由先前的服务调用）。

让我们取样。 我有以下应用程序：

• 组件AppComponent ：在bootstrap函数中创建Angular2应用程序时提供的应用程序的主要组件

   @Component({ selector: 'my-app', template: ` <child></child> `, (...) directives: [ ChildComponent ] }) export class AppComponent { } 

• 组件ChildComponent ：将在AppComponent组件内使用的AppComponent组件

   @Component({ selector: 'child', template: ` {{data | json}}<br/> <a href="#" (click)="getData()">Get data</a> `, (...) }) export class ChildComponent { constructor(service1:Service1) { this.service1 = service1; } getData() { this.data = this.service1.getData(); return false; } } 

• 两个服务， Service1和Service2 ： Service1时使用的ChildComponent和Service2通过Service1

   @Injectable() export class Service1 { constructor(service2:Service2) { this.service2 = service2; } getData() { return this.service2.getData(); } } 

  ---

   @Injectable() export class Service2 { getData() { return [ { message: 'message1' }, { message: 'message2' } ]; } } 

这是所有这些元素及其关系的概述：

Application
     |
AppComponent
     |
ChildComponent
  getData()     --- Service1 --- Service2

在这种应用中，我们有三个喷射器：

• 可以使用bootstrap功能的第二个参数配置的应用程序注入器
• 可以使用此组件的providers属性配置的AppComponent注入器。 它可以“看到”在应用程序注入器中定义的元素。 这意味着，如果在此提供程序中找不到提供程序，则会自动在此父注入器中查找。 如果在后者中未找到，将引发“未找到提供程序”错误。
• ChildComponent注入器将遵循与AppComponent相同的规则。 为了注入在组件中执行的注入链中涉及的元素，将首先在该注入器中寻找提供程序，然后在AppComponent者，最后在应用程序中寻找提供者。

这意味着，当尝试将Service1注入ChildComponent构造函数时，Angular2会寻找ChildComponent注入器，然后是AppComponent ，最后是应用程序。

由于Service2需要被注入到Service1 ，相同分辨率的处理会做到： ChildComponent注射器， AppComponent一个应用程序之一。

这意味着可以使用组件的providers属性和应用程序注入程序的bootstrap函数的第二个参数，根据您的需要在每个级别上指定Service1和Service2 。

这允许共享一组元素的依赖项实例：

• 如果您在应用程序级别定义提供程序，则相应的创建实例将由整个应用程序共享（所有组件，所有服务等）。
• 如果您在组件级别定义提供程序，则实例将由组件本身，其子组件以及依赖关系链中涉及的所有“服务”共享。

因此它非常强大，您可以根据自己的需要和需要自由组织。

这是相应的plunkr，因此您可以使用它： https ://plnkr.co/edit/PsySVcX6OKtD3A9TuAEw?p=preview。

Angular2文档中的此链接可以为您提供帮助： https ://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html。

Answer 2

当然可以。

在Angular2中，有多个注入器。 注入器使用组件的providers数组进行配置。 当组件具有providers数组时，将在树中的该点创建注入器。 当组件，指令和服务需要解决它们之间的依赖关系时，它们会查询注入器树以找到它们。 因此，我们需要使用提供程序配置该树。

从概念上讲，我喜欢认为有一个注入器树覆盖了组件树，但它比组件树稀疏。

同样，从概念上讲，我们必须配置此注入器树，以便在树中的适当位置“提供”依赖项。 Angular 2没有创建单独的树，而是重用了组件树来做到这一点。 因此，即使感觉像我们正在配置对组件树的依赖关系，我还是认为我正在配置对注入器树的依赖关系（它恰好覆盖了组件树，因此我必须使用组件对其进行配置）。

像泥一样清澈？

Angular 2拥有注入器树的原因是允许非单一服务-即能够在注入器树中的不同点创建特定服务的多个实例的能力。 如果要使用类似于Angular 1的功能（仅单例服务），请在根组件中提供所有服务。

---

设计您的应用程序， 然后返回并配置注入器树（使用组件）。 我就是这么想的。 如果您在另一个项目中重用组件，则很有可能需要更改providers数组，因为新项目可能需要不同的注入器树。

Answer 3

好吧，我想您应该在全球范围内提供两种服务：

bootstrap(App, [service1, service2]);

或提供给使用它们的组件：

@Component({providers: [service1, service2]})

@Injectable装饰器添加必要的元数据来跟踪依赖关系，但不提供它们。