组件无法从延迟加载的模块中找到提供者

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

}

我在这里查看了一些帖子，但无法从他们那里得到解决方案。

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

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

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 实例。这是由于分层注入器功能。该组件定义了自己的注入器，该注入器可以保存自己的实例，这些实例可供其子级使用。

[EventService] 等价于[ { provide: EventService, useClass: EventService }]。这意味着用于注入依赖项的键是EventService，并且正在使用EventService 构造函数构造实例。