无法在Angular 2中将来自http扩展器类的消息广播到App Component

Question

项目结构

错误信息 当我从http扩展器服务向app组件广播消息时，这就是我得到的错误。

加载拦截器（http扩展器）

这是我的http扩展程序，我无法从此处向App组件广播消息，但是我能够将子组件的消息广播到App组件，请参阅图像以获取错误信息和项目结构< / p>

import { Injectable } from '@angular/core';
import { Http, RequestOptions, RequestOptionsArgs, Response, ConnectionBackend } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { EventsEmitter } from './eventsEmitter';

@Injectable()
export class LoadingInterceptor extends Http {
    private currentRequests: number = 0;

    public constructor(_backend: ConnectionBackend, _defaultOptions: RequestOptions, private eventsEmitter: EventsEmitter) {
        super(_backend, _defaultOptions);
    }

    public get(url: string, options?: RequestOptionsArgs): Observable<Response> {
        this.incrementRequestCount();
        var response = super.get(url, options);
        response.subscribe(null, error => {
            this.decrementRequestCount();
        }, () => {
            this.decrementRequestCount();
        });
        return response;
    }

    private decrementRequestCount() {
        if (--this.currentRequests == 0) {
            this.eventsEmitter.broadcast('loading-complete');
        }
    }

    private incrementRequestCount() {
        if (this.currentRequests++ == 0) {
            this.eventsEmitter.broadcast('loading-started');
        }
    }
}

应用组件 我正在收听应用程序组件中广播的事件，以在屏幕上显示加载程序gif

import { Component } from '@angular/core';
import { EventsEmitter } from './assets/scripts/services/eventsEmitter';
import { ToasterService } from 'angular2-toaster';

@Component({
    selector: 'my-app',
    templateUrl:'app/app.component.html'
})
export class AppComponent {

    private toasterService: ToasterService;
    private message: any;
    private active: any;

    constructor(toasterService: ToasterService, private eventsEmitter: EventsEmitter) {
        this.toasterService = toasterService;
        this.eventListners();
    }


    eventListners() {
        

        this.eventsEmitter.on<string>('loading-complete')
            .subscribe(message => {
                this.active = false;
            });


        this.eventsEmitter.on<string>('loading-started')
            .subscribe(message => {
                this.active = true;
            });
    }

  

}

事件发射器

这是我用来广播事件的事件发射器

import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';

interface EventsEmitterInterface {
    key: any;
    data?: any;
}

export class EventsEmitter {
    private _eventBus: Subject<EventsEmitterInterface>;

    constructor() {
        this._eventBus = new Subject<EventsEmitterInterface>();
    }

    broadcast(key: any, data?: any) {
        this._eventBus.next({ key, data });
    }

    on<T>(key: any): Observable<T> {
        return this._eventBus.asObservable()
            .filter(event => event.key === key)
            .map(event => <T>event.data);
    }
}

应用模块

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { HttpModule, JsonpModule, Http, RequestOptions, XHRBackend, RequestOptionsArgs, Response, ConnectionBackend} from '@angular/http';
import { AppRoutingModule } from './app.routes';

import { AppComponent }  from './app.component';
import { LoginComponent } from './components/login/login.component';
import { LoadingInterceptor } from './assets/scripts/services/loadingInterceptor';
import { EventsEmitter } from './assets/scripts/services/eventsEmitter';
import { ToasterModule, ToasterService } from 'angular2-toaster';






@NgModule({
    imports: [AppRoutingModule, BrowserModule, FormsModule, ReactiveFormsModule, HttpModule, JsonpModule, ToasterModule ],
    declarations: [AppComponent, LoginComponent],
    bootstrap: [AppComponent],
    providers: [EventsEmitter,LoadingInterceptor,
        {
           provide: Http,
           useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions, eventsEmitter: EventsEmitter) => new LoadingInterceptor(xhrBackend, requestOptions, eventsEmitter),
            deps: [XHRBackend, RequestOptions]
        },{ provide: LocationStrategy, useClass: HashLocationStrategy }]
})
export class AppModule { }

我被困在这里很多天，如果你可以帮我解决这个问题会很有帮助

Answer 1

您忘记在EventsEmitter提供商中添加useFactory依赖项：

deps: [XHRBackend, RequestOptions]

应该是：

deps: [XHRBackend, RequestOptions, EventsEmitter]

这就是为什么LoadingInterceptor构造函数为undefined依赖项获取EventsEmitter的原因