在 Angular 中对不同服务使用指令

Question

我一定是从错误的角度来处理这个问题，但问题就在这里。我有一个异步验证指令，它使用 HttpClient 来验证后端的某些内容。它几乎是独立的，除了一件关键的事情——它需要正确的 HTTP headers 才能在服务器端通过身份验证。这是构造函数的样子：

constructor( 
    private http: HttpClient,
    private auth: AuthService,
    @Optional() @Self() @Inject(NG_VALUE_ACCESSOR) valueAccessors: ControlValueAccessor[]
) { 
    this.valueAccessor = valueAccessors.find( x => x.constructor === DataTextInputComponent) as DataTextInputComponent;
}

这项 auth 服务具有正确的 headers，然后将用于请求。

我最近使用 Nx 将我的项目拆分为 libs 和 apps，并希望在不同的上下文中使用此指令，其中 headers 和请求 url 是不同的。我该如何实现？

Answer 1

现在我明白了你的问题，我可以自信地推荐你使用 http interceptors。这些本质上将充当中间件，并将在调用完成之前修改请求。您可以在模块级别提供拦截器，这将确保每个模块可以有不同的拦截器。

这也将确保您遵守单一职责原则，因为该指令可以执行验证调用而无需担心设置正确的 headers。

这是 angular v5

中的 HTTP 拦截器实现示例

在 Angular 中对不同服务使用指令

Using directive with different services in Angular

typescript

angular-services

angular-directive

angular

angular-httpclient