Angular 6:为'root'提供HTTP_INTERCEPTORS

Question

从您在AppModule中提供服务的Angular 5到Angular 6的更改,您在@Injectable装饰器中设置'provideIn'键我已经更改了所有服务以使用新的"provideIn"方法.但是,异常是我的拦截服务.

如何为'root'提供HTTP_INTERCEPTORS标记并使用InterceptorService？

这是我使用atm的Angular 5方式:

@Injectable()
export class InterceptorService implements HttpInterceptor {
...
}

在AppModule中:

providers: [{
  provide: HTTP_INTERCEPTORS,
  useClass: InterceptorService,
  multi: true
}]

但Angular 6的方式是什么？

我尝试过类似的东西

@Injectable({
  provideIn: 'root',
  useValue: HTTP_INTERCEPTORS,
  deps: [forwardRef(() => InterceptorService)]
})
export class InterceptorService implements HttpInterceptor {
...
}

还有很多其他的Injectable变种,但似乎无法弄清楚如何在不将对象文字直接写入模块的提供者的情况下使其工作.

Answer 1

这里有几点需要注意：

1.providedIn: 'root'是一个不错的功能，但它可能不是为您打造的

正如@Leon 提到的，此功能旨在使服务更易于摇树。它并不意味着完全替换使用providers: []模块的属性。这是一个主要针对库开发人员的选项，而不是应用程序开发人员。

想象一下这个场景：

您几个月前创建了一项服务，现在您的应用不再使用它。您知道它没有使用它，因为它是您的应用程序，并且您拥有对代码库的完整知识和控制权。你对这项服务做了什么？

A) 确保它正在使用，providedIn: 'root'以便 Angular 可以将它从包中摇出，因为您不再使用它

B) 删除服务。

我猜是B！

想象另一个场景：

您正在使用来自 npm 包的第 3 方 Angular 模块。该模块有 12 种不同的服务，您可以在您的应用程序中使用它来利用其功能。您的应用程序不需要所有这些功能，因此您只需将其中 3 种服务类型注入应用程序组件或服务。

你如何解决这个问题？

A) Fork 存储库，以便您可以删除应用程序不使用的所有服务，因此您不必将它们包含在您的包中。

B) 要求项目所有者使用providedIn: 'root'. 如果库作者使用providedIn: 'root'了您不使用的服务，则不会对您的包大小产生影响，并且它们可以保留在 npm 包/Angular 模块中供其他团队在需要时使用。

我猜是B！

2.providedIn: 'root'不适用于拦截器

拦截器是一种multiDI 令牌服务，这意味着您可以为同一个 DI 令牌提供多个值。那个令牌是HTTP_INTERCEPTORS. 该@Injectable({...})装饰不公开任何API为令牌的方式提供不同装饰类型@NgModule({...})的装饰做。

这意味着你不能Anywhere you would normally ask for 'HTTP_INTERCEPTORS' add this service to the set of values to use instead使用@Injectable({...})装饰器告诉 Angular 。

您只能在@NgModule({...})装饰器中执行此操作。

3.提供拦截器是顺序相关的

拦截器是一个管道，它们提供的顺序决定了它们访问请求对象（修改或检查）和响应对象（修改或检查）的顺序。

虽然某些拦截器可能与顺序无关，但您仍然可能希望在该顺序中有一些确定性。

因此，即使providedIn: 'root'为拦截器工作，它们提供的顺序也将由 Angular 编译步骤期间类型的解析顺序决定 - 可能不是您想要的。

相反，providers: []在@NgModule({...})装饰器的数组中提供它们意味着您可以显式设置它们将被调用的顺序。

Answer 2

Angular 6 的-propertyprovideIn只是 Angular 5 中行为的补充。如果您想使用已经存在的 InjectionToken 提供某些内容，您仍然必须使用该{ provide: ClassA, useClass: ClassB }语法。

请参阅-> https://angular.io/guide/dependency-injection-in-action#external-module-configuration

tl;dr：您提供 HTTP_INTERCEPTORS 的方式在 Angular 6 中没有改变，并且没有“Angular 6”方式。