对共享模块中的组件使用拦截器

Question

我在“app.module”中使用Angular的新拦截器功能，我的应用程序中的所有组件都成功使用它：

import { ProgressInterceptor } from "./progress.interceptor";
providers: [
      { provide: HTTP_INTERCEPTORS, useClass: ProgressInterceptor, multi: true }
  ]

但是我也有一个“shared.module”，其中的所有组件都使用拦截器不，即使它已在“app.module”中声明。如何让“shared.module”中的组件使用相同的拦截器？

这里的参考是我的“shared.module”：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from "@angular/router";
import { MyDatePickerModule } from 'mydatepicker';
import { EditorModule, SharedModule } from 'primeng/primeng';
import { FileUploadModule } from 'primeng/primeng';
import { DialogModule } from 'primeng/primeng';
import { ChartModule } from 'primeng/primeng';
import { ColorPickerModule } from 'ngx-color-picker';
import { AccordionModule } from 'primeng/primeng';

import { NotifyModalComponent } from '../shared/notify-modal.component';
import { ErrorModalComponent } from '../shared/error-modal.component';
import { UploadDownloadComponent } from '../shared/upload-download.component';
import { HeaderComponent } from '../shared/header.component';
import { BarChartComponent } from '../shared/bar-chart.component';
import { PieChartComponent } from '../shared/pie-chart.component';
import { EventNavigationComponent } from '../shared/event-navigation.component';
import { EventTitleBannerComponent } from '../shared/event-title-banner.component';
import { StandardFooterComponent } from '../shared/standard-footer.component';
import { StandardNavigationComponent } from '../shared/standard-navigation.component';
import { StandardReportDataComponent } from '../shared/standard-report-data.component';
import { MisReportsFormComponent } from '../shared/mis-reports-form.component';
import { StandardReportTotalsDataComponent } from '../shared/standard-report-totals-data.component';
import { AuditLogFormComponent } from '../shared/audit-log-form.component';
import { CreateEventBannerComponent } from '../shared/create-event-banner.component';
import { LanguageSelectorComponent } from '../shared/language-selector.component';
import { DisableButtonDuringAjax } from '../shared/disable-button-during-ajax.directive';

import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
import { TranslateHttpLoader } from "@ngx-translate/http-loader";
import { TranslateService } from '@ngx-translate/core';





@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        RouterModule,
        MyDatePickerModule,
        EditorModule,
        SharedModule,
        FileUploadModule,
        DialogModule,
        ChartModule,
        ColorPickerModule,
        AccordionModule,
        TranslateModule
    ],
    declarations: [
        NotifyModalComponent,
        ErrorModalComponent,
        UploadDownloadComponent,
        HeaderComponent,
        BarChartComponent,
        PieChartComponent,
        EventNavigationComponent,
        EventTitleBannerComponent,
        StandardFooterComponent,
        StandardNavigationComponent,
        StandardReportDataComponent,
        MisReportsFormComponent,
        StandardReportTotalsDataComponent,
        AuditLogFormComponent,
        CreateEventBannerComponent,
        LanguageSelectorComponent,
        DisableButtonDuringAjax
    ],
    exports: [
        NotifyModalComponent,
        ErrorModalComponent,
        UploadDownloadComponent,
        HeaderComponent,
        BarChartComponent,
        PieChartComponent,
        EventNavigationComponent,
        EventTitleBannerComponent,
        StandardFooterComponent,
        StandardNavigationComponent,
        StandardReportDataComponent,
        MisReportsFormComponent,
        StandardReportTotalsDataComponent,
        AuditLogFormComponent,
        CreateEventBannerComponent,
        LanguageSelectorComponent,
        DisableButtonDuringAjax,
        TranslateModule
    ]
})
export class SharedModuleForSite{

    constructor(private translate: TranslateService) {


    }

}

这是我的“app.module”：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { routing } from "./app.routing";
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MomentModule } from 'angular2-moment';
import { MyDatePickerModule } from 'mydatepicker';
import { EditorModule, SharedModule } from 'primeng/primeng';
import { FileUploadModule } from 'primeng/primeng';
import { DialogModule } from 'primeng/primeng';
import { ChartModule } from 'primeng/primeng';
import { ColorPickerModule } from 'ngx-color-picker';

import { SharedModuleForSite } from './shared/shared.module';

import { AppComponent } from './app.component';

import { LoginComponent } from './login.component';
import { NoEventsComponent } from './no-events.component';
import { ReportsComponent } from './reports/reports.component';
import { AddressReportsComponent } from './address-reports/address-reports.component';
import { ForgottenPasswordComponent } from './forgotten-password.component';

import { HttpService } from "./http.service";
import { AuthGuard } from "./auth.guard";
import { NotifyService } from "./notify.service";
import { ErrorService } from "./error.service";
import { BusyService } from "./busy.service";
import { ReloadComponentService } from "./reload-component.service";
import { DateFormatPipe } from 'angular2-moment';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { ProgressInterceptor } from "./progress.interceptor";

import { HttpClient, HttpClientModule } from "@angular/common/http";
import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
import { TranslateHttpLoader } from "@ngx-translate/http-loader";


export function HttpLoaderFactory(httpClient: HttpClient) {
    return new TranslateHttpLoader(httpClient, "./assets/i18n/", ".json");
}



@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    NoEventsComponent,
    ReportsComponent,
    AddressReportsComponent,
    ForgottenPasswordComponent
  ],
  imports: [
      BrowserModule,
      HttpClientModule,
      TranslateModule.forRoot({
          loader: {
              provide: TranslateLoader,
              useFactory: HttpLoaderFactory,
              deps: [HttpClient]
          }
      }),
      routing,
      BrowserAnimationsModule,
      FormsModule,
      ReactiveFormsModule,
      MomentModule,
      MyDatePickerModule,
      EditorModule,
      SharedModule,
      FileUploadModule,
      DialogModule,
      ChartModule,
      ColorPickerModule,
      SharedModuleForSite
  ],
  providers: [
      HttpService,
      AuthGuard,
      NotifyService,
      ErrorService,
      BusyService,
      ReloadComponentService,
      DateFormatPipe,
      { provide: HTTP_INTERCEPTORS, useClass: ProgressInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }