无法在角2中从http扩展程序类广播消息到App组件

Question

项目结构

​

​

错误信息--这是我从http扩展程序服务向应用程序组件广播消息时所得到的错误。

​

​

加载拦截器(http扩展程序)

这是我的http扩展程序，我无法从这里将消息广播到App组件，但是我能够将从子组件中的消息广播到App组件，请查看图像中的错误信息和项目结构

​

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

​

App 我正在收听app组件中播放的事件，以便在屏幕上显示加载程序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构造函数获得EventsEmitter依赖项的undefined的原因。