Wie ein Ereignis von HttpInterceptor im Winkel 5

Question

emittieren Ich versuche, ein Ereignis von HttpInterceptor zu senden.

-Code meiner Veranstaltungen Service:

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

export class Message { 
    constructor(public name:string, public data:any){  
    } 
} 

export class NotifyService { 
dispatcher: EventEmitter<any> = new EventEmitter(); 

constructor() {} 

emitMessageEvent(name:string, data:any){ 
    let message = new Message(name,data); 
    this.dispatcher.emit(message); 
} 

getEmitter() { 
    return this.dispatcher; 
} 

Eine Komponente, die Ereignisse

import { Component } from '@angular/core'; 
import { Router } from '@angular/router'; 

import { NotifyService } from './services/notify.service'; 


@Component({ 
    ... 
    providers: [ NotifyService ] 
}) 
export class AppComponent { 
    subscription: any; 

    constructor(private router: Router, private notifyService: NotifyService) { 
    } 

    ngOnInit() { 
    this.subscription = this.notifyService.getEmitter() 
     .subscribe(item => this.showAppLevelAlarm(item)); 
    } 

    private showAppLevelAlarm(_notify: any): void { 
    // this.message = _notify.msg; 
    console.log(_notify); 
    } 
} 

Und mein HttpInterceptor erhält:

import { NotifyService } from '../services/notify.service'; 

@Injectable() 
export class ApiInterceptor implements HttpInterceptor { 

constructor(public notifyService: NotifyService) {} 

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    return next.handle(req).do(event => { 
    return event; 
}, 
error => { 
    this.notifyService.emitMessageEvent('showAppLevelAlert', error.error); 
}) 

Helfen Sie mir zu verstehen, warum die Ereignisse, die aus gesendet wurden Der HttpInterceptor wird von der AppComponent nicht empfangen. Wenn ich jedoch ein Ereignis von einer anderen Komponente sende, empfängt die AppComponent ein Ereignis.

Answer 1

Du diesen falsch gehen, allen Event-Sender sollte nicht ein für das Ansehen von Änderungen an Verfahren gehen, wie hier in

http://blog.bogdancarpean.com/how-to-watch-for-changes-an-arrayobject-on-angular-2/

erklärt eher local oder sessionstorage verwenden Sie sollten Ihre Daten speichern in Interceptor (wie sie sind global in der Natur) und dann recieve Änderungen an sie mit doCheck Lifecycle Haken in Angular

ich meinen Abfangjäger für Authorization Token angehängt und Erkennen, ob ich die Ladebalken angezeigt werden soll,

Hier

ist mein Code

interceptor.ts

import { Injectable } from '@angular/core'; 
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpResponse} from '@angular/common/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/do'; 

@Injectable() 
export class IndInterceptor implements HttpInterceptor{ 
    intercept(
    req: HttpRequest<any>, 
    next: HttpHandler): Observable<HttpEvent<any>> { 
    return next.handle(req).do(evt => { 
     localStorage.setItem('loading','Y'); 
     if (evt instanceof HttpResponse) { 
     localStorage.setItem('loading','N'); 
     console.log('---> status:', evt.status); 
     console.log('---> filter:', req.params.get('filter')); 
     } 
    }); 

    } 
} 

component.ts

import { Component, DoCheck } from '@angular/core'; 
export class AppComponent implements DoCheck{ 
    public loading; 
    ngDoCheck(){ 
     this.loading = localStorage.getItem('loading'); 
     console.log(this.loading); 
    } 
}