Angular 库：单独的 HttpInterceptor
Angular library: Separate HttpInterceptor
我想达到的目标
一个封装的应用程序（表单编辑器），我可以在另一个 angular 应用程序中使用，也可以在任何 Web 应用程序中使用。
想法
主要 modules/components 可以实现为 angular 库（主要组件作为影子 dom），因此我可以添加一个 'angular elements' 包装器来构建 web 组件，但也可以将库本身作为 npm 包导入到我现有的 angular 应用程序中。因此，我的 angular 应用程序不会加载完整的 javascript 包，而只会加载模块，但其他应用程序未提供，以获得更好的性能和集成。
问题
对于来自图书馆的每个请求，我想要一个 http 拦截器来登录/将 jwt 令牌添加到请求 header。当我使用 angular 元素包装器构建应用程序时（除了导入库和构建 webcomponent 之外什么都不做），一切正常。当我将它添加到 angular 应用程序时，拦截器没有按预期工作，因为另一个应用程序也有一个拦截器。我只想将库拦截器封装到库中。所以我想我只需要再次在我的库中导入 HttpClientModule 并获得我自己的实例，所以同一文件中定义的 HTTP_INTERCEPTORS 提供程序知道何时被触发。不幸的是，这个想法行不通，两者都在干扰。
AppModule
- 进口：
- HttpClientModule(1)
- 自定义库模块
- 供应商：
- HTTP_INTERCEPTORS(1)
CustomLibraryModule
- 进口：
- HttpClientModule(2)
- 供应商：
- HTTP_INTERCEPTORS(2)
在最好的情况下，我想在我的应用程序的延迟加载 child 模块中导入 CustomLibraryModule。
问题
我是否针对这种情况选择了正确的工具？你知道我做错了什么来获取我封装的 http 拦截器吗？
现在您说这个独立的表单编辑器知道您的后端需要 JWT，这让您感到困惑。 Web 组件应该不知道您的后端实现。
如果你有一个特定的后端，这个组件的所有实例都应该与之通信，那么你可以导出一个拦截器供任何 Angular 应用程序使用，或者你可以封装将 JWT 添加到请求直接在您的代码中，根本不使用拦截器。
此外，如果您在 Angular 之外的应用程序中使用它，您仍然需要 Angular 才能出现在页面上（请参阅 https://angular.io/guide/elements
经过一番研究，我找到了原因，为什么CustomLibraryModule没有使用自己的拦截器，而是使用主应用程序的拦截器。该库使用由 nswag（.NET 后端）生成的 API classes。不幸的是，生成的可注入 classes 被配置为单例，因此每个 class 都装饰有
@Injectable({ providedIn: 'root' })
我更改了这个配置，现在它们只用
装饰了
@Injectable()
此外，我在模块的 'providers' 部分添加了 API classes。现在使用延迟加载模块的 HttpClient 引用调用其构造函数，并调用正确的拦截器。
因为不了解，慢慢的转到了我的这部分代码。所以最后是我自己的错，但我很感谢你的帮助和澄清。
我想达到的目标
一个封装的应用程序（表单编辑器），我可以在另一个 angular 应用程序中使用，也可以在任何 Web 应用程序中使用。
想法
主要 modules/components 可以实现为 angular 库（主要组件作为影子 dom），因此我可以添加一个 'angular elements' 包装器来构建 web 组件，但也可以将库本身作为 npm 包导入到我现有的 angular 应用程序中。因此，我的 angular 应用程序不会加载完整的 javascript 包，而只会加载模块，但其他应用程序未提供，以获得更好的性能和集成。
问题
对于来自图书馆的每个请求，我想要一个 http 拦截器来登录/将 jwt 令牌添加到请求 header。当我使用 angular 元素包装器构建应用程序时（除了导入库和构建 webcomponent 之外什么都不做），一切正常。当我将它添加到 angular 应用程序时，拦截器没有按预期工作，因为另一个应用程序也有一个拦截器。我只想将库拦截器封装到库中。所以我想我只需要再次在我的库中导入 HttpClientModule 并获得我自己的实例，所以同一文件中定义的 HTTP_INTERCEPTORS 提供程序知道何时被触发。不幸的是，这个想法行不通，两者都在干扰。
AppModule
- 进口：
- HttpClientModule(1)
- 自定义库模块
- 供应商：
- HTTP_INTERCEPTORS(1)
CustomLibraryModule
- 进口：
- HttpClientModule(2)
- 供应商：
- HTTP_INTERCEPTORS(2)
在最好的情况下，我想在我的应用程序的延迟加载 child 模块中导入 CustomLibraryModule。
问题
我是否针对这种情况选择了正确的工具？你知道我做错了什么来获取我封装的 http 拦截器吗？
现在您说这个独立的表单编辑器知道您的后端需要 JWT，这让您感到困惑。 Web 组件应该不知道您的后端实现。
如果你有一个特定的后端，这个组件的所有实例都应该与之通信，那么你可以导出一个拦截器供任何 Angular 应用程序使用，或者你可以封装将 JWT 添加到请求直接在您的代码中，根本不使用拦截器。
此外，如果您在 Angular 之外的应用程序中使用它，您仍然需要 Angular 才能出现在页面上（请参阅 https://angular.io/guide/elements
经过一番研究，我找到了原因，为什么CustomLibraryModule没有使用自己的拦截器，而是使用主应用程序的拦截器。该库使用由 nswag（.NET 后端）生成的 API classes。不幸的是，生成的可注入 classes 被配置为单例，因此每个 class 都装饰有
@Injectable({ providedIn: 'root' })
我更改了这个配置，现在它们只用
装饰了@Injectable()
此外，我在模块的 'providers' 部分添加了 API classes。现在使用延迟加载模块的 HttpClient 引用调用其构造函数，并调用正确的拦截器。
因为不了解，慢慢的转到了我的这部分代码。所以最后是我自己的错，但我很感谢你的帮助和澄清。