角拦截器在角5版本中不起作用

Question

我也遇到了相同的错误，该类没有提供程序 AppHttpInterceptor甚至我在app模块中添加了提供程序，并做了所有小事情来使其正常工作。

请输入验证码

http.interceptor.ts

import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { Injectable } from "@angular/core"
import { Observable } from "rxjs";
import { tap, catchError } from "rxjs/operators";
import { ToastrService } from 'ngx-toastr';
import { of } from 'rxjs/observable/of';

@Injectable()

export class AppHttpInterceptor implements HttpInterceptor {
    constructor(public toasterService: ToastrService) { }
    intercept(
        req: HttpRequest<any>,
        next: HttpHandler
    ): Observable<HttpEvent<any>> {
        console.log('start')
        return next.handle(req).pipe(
            tap(evt => {
                console.log(evt);
                alert();
                if (evt instanceof HttpResponse && evt.body && evt.body.success) {
                    this.toasterService.success(evt.body.success.message, evt.body.success.title, { positionClass: 'toast-bottom-center' });
                }
            }),
            catchError((err: any) => {
                console.log('err')
                if (err instanceof HttpErrorResponse) {
                    try {
                        this.toasterService.error(err.error.message, err.error.title, { positionClass: 'toast-bottom-center' });
                    } catch (e) {
                        this.toasterService.error('An error occurred', '', { positionClass: 'toast-bottom-center' });
                    }
                    //log error 
                }
                return of(err);
            }));

    }

   

}

role.service.ts

import { AppHttpInterceptor } from './http.interceptor';
import { Injectable } from '@angular/core';
import { Headers, Http, RequestOptions, Response } from "@angular/http";
import { environment } from '../../environments/environment';

@Injectable()
export class RolesService {
    private apiUrl = environment.apiUrl

    constructor(private http: Http, private ads: AppHttpInterceptor) { }

   
    getRoles() {
        let url = this.apiUrl + '/api/v1/role/all';
        return this.http.get(url, this.jwt()).map((response: Response) => {
            //console.log('service', response)
            // this.ads.displayToast(response.json());
            return response;
        });

    }

  
    }

  
}

我已在以下应用模块中添加了hTTp拦截器的提供程序

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ThemeComponent } from './theme/theme.component';
import { LayoutModule } from './theme/layouts/layout.module';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ScriptLoaderService } from "./_services/script-loader.service";
import { ThemeRoutingModule } from "./theme/theme-routing.module";
import { AuthModule } from "./auth/auth.module";
import { SharedService } from './_services/shared.service';
import { ToastrModule } from 'ngx-toastr';
import { AppHttpInterceptor } from './_services/http.interceptor';

@NgModule({
    declarations: [
        ThemeComponent,
        AppComponent
    ],
    imports: [
        LayoutModule,
        BrowserModule,
        BrowserAnimationsModule,
        AppRoutingModule,
        ThemeRoutingModule,
        AuthModule,
        HttpClientModule,
        ToastrModule.forRoot({
            timeOut: 2000,
            positionClass: 'toast-bottom-right',
            preventDuplicates: true,
            autoDismiss: true,
            newestOnTop: true,
            progressBar: true,
            closeButton: true,
            tapToDismiss: true
        }),
    ],
    providers: [ScriptLoaderService, SharedService,
        [{
            provide: HTTP_INTERCEPTORS, useClass: AppHttpInterceptor, multi: true
        }]
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }