각도 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가 이벤트를 수신합니다.

Answer 1

당신은 당신이 아니라 당신의 데이터를 저장하는 로컬 스토리지 또는 sessionstorage를 사용해야합니다

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

여기에 설명 된대로 변경 내용을 시청하기위한 방법으로 이동 야해 먼저 이벤트 이미 터의이 잘못에 대해 가고있다 (글로벌 성격을 띤) 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); 
    } 
}