Question

我想使用角度材料mdsnackbar服务来处理常见的http错误，但是，我无法弄清楚如何实现它。如果我将MdSnackBar添加到像private mdsnackbar: MdSnackBar之类的构造函数中导致类本身使用super

，它会给我一个错误，例如不匹配任何参数类型

我想知道是否有另一种方法可以获得相同的结果。

HTTP拦截

import { Injectable } from '@angular/core';
import {
  ConnectionBackend,
  RequestOptions,
  Request,
  RequestOptionsArgs,
  Response,
  Http,
  Headers,
} from '@angular/http';

import { ToastrService } from './toastr.service'
import { MdSnackBar } from '@angular/material';

import { Observable } from 'rxjs/Rx';
import { environment } from '../environments/environment';


@Injectable()

export class HttpInterceptorService extends Http {
  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
    super(backend, defaultOptions);
  }



  request(
    url: string | Request,
    options?: RequestOptionsArgs
  ): Observable<Response> {
    return super.request(url, options).catch(this.catchErrors());
  }

  catchErrors() {
    return (res: Response) => {
      console.log(res);
      if (res.status === 401) {
         // this.toastrService.showToaster('Hello World');
         return Observable.throw(res);
      }
      return Observable.throw(res);
    };
  }

  get(url: string, options?: RequestOptionsArgs): Observable<Response> {
    url = this.updateUrl(url);
    console.log(url);
    return super.get(url, this.getRequestOptionArgs(options));
  }

  post(
    url: string,
    body: string,
    options?: RequestOptionsArgs
  ): Observable<Response> {
    url = this.updateUrl(url);
    return super.post(url, body, this.getRequestOptionArgs(options));
  }

  put(
    url: string,
    body: string,
    options?: RequestOptionsArgs
  ): Observable<Response> {
    url = this.updateUrl(url);
    return super.put(url, body, this.getRequestOptionArgs(options));
  }

  delete(url: string, options?: RequestOptionsArgs): Observable<Response> {
    url = this.updateUrl(url);
    return super.delete(url, this.getRequestOptionArgs(options));
  }

  private updateUrl(req: string) {
    return environment.origin + req;
  }

  private getRequestOptionArgs(
    options?: RequestOptionsArgs
  ): RequestOptionsArgs {
    if (options == null) {
      options = new RequestOptions();
    }
    if (options.headers == null) {
      options.headers = new Headers();
    }
    options.headers.append('Content-Type', 'application/json');
    return options;
  }
}

toastrservice

 import { Injectable } from '@angular/core';
 import { MdSnackBar } from '@angular/material';

@Injectable()
export class ToastrService {

  constructor(private snackBar: MdSnackBar) {
  }

  showToaster(msg: string) {
      this.snackBar.open(msg, null, {
          duration: 3000,
      });
  }

}

http.service.ts

import { XHRBackend, Http, RequestOptions } from '@angular/http';
import { HttpInterceptorService } from './shared/http-interceptor.service';
import { ToastrService } from './shared/toastr.service'

export function httpService(
  xhrBackend: XHRBackend,
  requestOptions: RequestOptions,
  toastr: ToastrService // forget to insert it
): Http {

  return new HttpInterceptorService(xhrBackend, requestOptions, toastr);
}

app.module.ts

providers: [
    DataserviceService,
    HttpInterceptorService,
    ToastrService,
    {
      provide: Http,
      useFactory: httpService,
      deps: [XHRBackend, RequestOptions, ToastrService],
    },

我对http.service.ts和app.module.ts都有更新依赖关系，它就像一个charmm。

Answer 1

您需要将其添加到构造函数参数列表

@Injectable()

export class HttpInterceptorService extends Http {
  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private toastr:ToastrService) {
    super(backend, defaultOptions);
  }

您还需要在某处提供ToastrService以便注入。

@NgModule({
  ...,
  providers: [ToastrService], 
}}

MdSnackBar也需要在某处提供，例如通过导入提供它的模块。

角度注射toastr服务

1 个答案: