角度5のHttpInterceptorからイベントを放出する方法

Question

HttpInterceptorからイベントを送信しようとしています。私のイベントサービスの

コード：

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

コンポーネントイベント

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

そして、私のHttpInterceptor受け取り：

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

は私が理解して助けを理由から送信されたイベントHttpInterceptorはAppComponentによって受信されません。しかし、別のコンポーネントからイベントを送信すると、AppComponentはイベントを受け取ります。

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

に、ここで説明したように、すべてのイベント・エミッターの最初、この間違っについてうとしている

Answer 1

変化を見るための方法に進みますことはずのあなたはかなりのあなたのデータを格納するためのlocalStorageやのsessionStorageを使用する必要がありますDoCheckのライフサイクルフックを使って変更を受け取ります。

私はインターセプタを使用して認可トークンを追加し、ローディングバーを表示するかどうかを検出します。

は、ここに私のコード

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