如何跟踪特定角度组件中的 api 调用

Question

我有一个父 Angular 组件，其中包含多个子组件。我需要跟踪从父组件及其子组件发出的所有 API 调用，但我想排除从应用程序的其他部分发出的 API 调用。

要求： 跟踪应包括由父组件或其任何子组件直接或间接触发的 API 调用。 不应跟踪来自应用程序其余部分的 API 调用。 理想情况下，该解决方案应该使用拦截器或其他合适的方法在 Angular 应用程序中实现。 我尝试过的： 我考虑过使用 HttpInterceptor，但它会全局跟踪 API 调用，其中包括来自应用程序中其他组件的调用。 我尝试通过在每个组件中记录 API 调用来手动跟踪 API 调用，但这种方法不可扩展或高效。

Answer 1

最简单的方法是在父级提供装饰/委托的 HttpClient 服务：

{
  provide: HttpClient,
  useFactory: x => new HttpClientDecorator(x),
}

还有其他选择，但这取决于很多因素，例如使用标头/参数标记请求以启用全局拦截器的检测，为一组组件创建新模块并仅为该模块提供拦截器，为一组将进行调用的组件创建特定服务等。