組件找不到來自延遲加載模塊的提供程序

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構造函數構造。