javascript - Angular 5 提供基于环境的http拦截器

Question

我的 angular-cli(v1.5.1，angular v5)应用程序中有以下两个环境:

1. 开发
2. 产品

Dev 使用模拟数据，我提供了一个 http 拦截器。 Pro 使用实时休息 api。

我如何在 dev 上提供 http 拦截器，而不是在 pro 上？ 我已经尝试了以下方法，但它不起作用:

{
  provide: HTTP_INTERCEPTORS,
  useFactory: () => {
    if (environment.useMockBackend === true) {
      return MockHttpInterceptor;
    }
    return false;
  },
  multi: true
}

Answer 1

在我的 Angular 5.2 项目中，我使用了以下方法。

app.module.ts

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { environment } from '../environments/environment';
import { MyInterceptor } from './my.interceptor';

const commonProviders = [/*...*/];
const nonProductionProviders = [{ 
  provide: HTTP_INTERCEPTORS,
  useClass: MyInterceptor,
  multi: true
}];

@NgModule({
  imports: [
    HttpClientModule,
    // ...
  ],
  providers: [
    ...commonProviders,
    ...!environment.production ? nonProductionProviders : []
  ]
})

my.interceptor.ts

import { Injectable } from '@angular/core';
import { HttpEvent, HttpRequest, HttpInterceptor, HttpHandler } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class MyInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    // ...
    return next.handle(req);
  }
}