Funktion in Komponente von HttpInterceptor aufrufen?

Question

Kann eine Funktion in einer Komponente von HttpInterceptor aufgerufen werden?

@Injectable() 
export class HttpResponseInterceptor implements HttpInterceptor { 

    // constructor(@Inject(DOCUMENT) private document: any) { } 

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
    console.log('HttpRequest<any> called'); 
    const started = Date.now(); 
    // Call component function 
    return next.handle(req).do((event: HttpEvent<any>) => { 
     if (event instanceof HttpResponse) { 
     // Call component function on response 
     } 
    }); 
    } 

} 

Answer 1

Sie können eine Funktion in einer Komponente nicht von einem Service aus aufrufen. So funktioniert Angular nicht. Wenn Sie dies tun möchten, müssen Sie die Klasseninstanz dieser Komponente im Wesentlichen an den Dienst übergeben und über öffentlich zugängliche Eigenschaften verfügen. Aber das ist ein schmutziger Ansatz, und Sie sollten es vermeiden.

Sie können jedoch einen beobachtbaren Stream aus einem Service hinzufügen, und eine Komponente kann diesen beobachtbaren Stream abonnieren und die gewünschte Funktion aufrufen. Das wäre "der eckige Weg", dies zu tun.

Mit diesem Ansatz können Sie das gleiche Stück Daten in so vielen Komponenten wie Sie wollen, und Sie können so viele Funktionen wie Sie möchten in diesen Komponenten aufrufen. Alles, was Sie tun müssen, ist subscribe() anrufen und voila.

Zum Beispiel:

@Injectable() 
export class HttpResponseInterceptor { 
    dataStream: ReplaySubject<any> = new ReplaySubject(); 

    dataStream$(): Observable<any> { 
     return this.dataStream().asObservable(); 
    } 

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 
     console.log('HttpRequest<any> called'); 
     const started = Date.now(); 

     return next.handle(req).do((event: HttpEvent<any>) => { 
      if (event instanceof HttpResponse) { 
       // Pass in some data in the `next()` function. 
       // Every time this is called, your components subscription function will be triggered. 
       this.dataStream.next(...); 
      } 
     }); 
    } 
} 

@Component({...}) 
export class MyComponent { 
    ngOnInit() { 
     this.httpInterceptorService.dataStream$().subscribe(data => { 
      // This will be triggered every time data is added to the stream in your HttpInterceptorService class. 
      // Call your custom function here... 
     }); 
    } 
}