Angular 从HttpInterceptor调用组件中的函数？

是否可以从

HttpInterceptor

调用组件中的函数

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

}

@Injectable（）
导出类HttpResponseInterceptor实现HttpInterceptor{
//构造函数（@Inject（DOCUMENT）private DOCUMENT:any）{}
截取（req:HttpRequest，next:HttpHandler）：可观察{
log（'HttpRequest called'）；
const start=Date.now（）；
//调用组件函数
返回next.handle（req）.do（（事件：HttpEvent）=>{
if（HttpResponse的事件实例）{
//响应时调用组件函数
}
});
}
}

您不应该从服务调用组件方法；这不是一个好的做法。如果要这样做，基本上必须将该组件的类实例传递到服务中，并且它必须具有可公开访问的属性。但这是一种肮脏的做法，你应该避免

然而，您可以从服务添加到可观察流中，组件可以订阅该可观察流并调用它想要的任何函数。这将是做这件事的“有棱角的方式”

通过这种方法，您可以在任意多的组件中获得相同的数据，并且可以在这些组件中调用任意多的函数。你所需要做的就是调用

subscribe（）

然后瞧

例如：

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

@Injectable（）
导出类HttpResponseInterceptor{
dataStream:ReplaySubject=新的ReplaySubject（）；
dataStream$（）：可观察{
返回此.dataStream（）.asObservable（）；
}
截取（req:HttpRequest，next:HttpHandler）：可观察{
log（'HttpRequest called'）；
const start=Date.now（）；
返回next.handle（req）.do（（事件：HttpEvent）=>{
if（HttpResponse的事件实例）{
//在“next（）”函数中传入一些数据。
//每次调用它时，都会触发组件订阅功能。
this.dataStream.next（…）；
}
});
}
}
@组件（{…}）
导出类MyComponent{
恩戈尼尼特（）{
this.httpInterceptorService.dataStream$（）.subscribe（数据=>{
//每次将数据添加到HttpInterceptorService类中的流时，都会触发此操作。
//在此处调用自定义函数。。。
});
}
}

如果您想重用函数，请尝试在服务中设置函数。我不知道，但最好是在服务中使用函数，并尽可能在拦截器和组件中共享。作为此功能的扩展，这个问题+答案可能是有用的：我的工作与行为主题，而不是ReplaySubject@PravinrajVenkatachalam

BehaviorSubject

也可以正常工作。它只取决于您是否希望流向新订户发出所有以前的状态，而

ReplaySubject

就是这样做的

BehaviorSubject

仅向新订户发送最新值或初始值。