javascript - 组件无法从延迟加载模块中找到提供程序

Question

我有一个延迟加载的模块，其中包含一项服务和一个组件。

我想使用该组件中的服务，但我得到:

Error: No provider for EventService!

模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EventRoutingModule } from './event-routing.module';

import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { EventListModule } from './../event-list/event-list.module';

import { ModuleWithProviders } from '@angular/core';

import { EventComponent } from './event.component';
import { EventService } from './event.service';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        HttpModule,
        EventRoutingModule,
        EventListModule
    ],
    declarations: [EventComponent]
})

export class EventModule {

    static forRoot(): ModuleWithProviders {
        return {
            ngModule: EventModule,
            providers: [EventService]
        };
    }

}

组件

import { Component, OnInit } from '@angular/core';
import { EventService } from './event.service';

@Component({
    templateUrl: './event.component.html',
    styleUrls: ['./event.component.scss']
})
export class EventComponent implements OnInit {


    private eventService: EventService;

    constructor(eventService: EventService) {
        this.eventService = eventService;
    }

    ngOnInit() {
        this.eventService.getEvents().subscribe(data => console.log(data), error => console.log(error));
    }

}

服务

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { AuthHttp } from 'angular2-jwt';

@Injectable()
export class EventService {
    private static readonly URL = 'http://localhost:3000/api/events';

    constructor(private authHttp: AuthHttp) { }

    public getEvents() {

        return this.authHttp.get(EventService.URL);
    }

}

我在这里看了几篇文章，但没能从他们那里得到解决方案。

我知道延迟加载模块中的提供程序是模块范围的，并且延迟加载模块有自己的依赖关系树。

但是必须可以将提供程序注入(inject)到组件中，不是吗？

Answer 1

您需要定义提供服务的方式。

您可以定义如何在模块级别提供它:

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        HttpModule,
        EventRoutingModule,
        EventListModule
    ],
    declarations: [EventComponent],
    providers: [EventService]
})
export class EventModule { ... }

这意味着一个 EventService 实例将可用于整个模块。

或者在组件级别:

@Component({
    templateUrl: './event.component.html',
    styleUrls: ['./event.component.scss'],
    providers [EventService]
})
export class EventComponent implements OnInit { ... }

这意味着每个组件实例都可以使用一个 EventService 实例。这是由于分层注入(inject)器功能所致。该组件定义了自己的注入(inject)器，该注入(inject)器可以保存可供其子组件使用的自己的实例。

[EventService] 相当于 [ {provide:EventService, useClass:EventService }]。这意味着用于注入(inject)依赖项的关键是 EventService 并且实例是使用 EventService 构造函数构造的。