Angular 正在注入 toastr 服务

Question

我想使用 angular 材料 mdsnackbar 服务处理常见的 http 错误，但是，我不知道如何实现它。它给了我一个错误，例如不匹配任何参数类型，如果我将 MdSnackBar 添加到构造函数，如 private mdsnackbar: MdSnackBar 导致 class 本身使用 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 上都有更新依赖项，它工作得很好。

Answer 1

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

@Injectable()

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

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

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

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

Angular 正在注入 toastr 服务

Angular injecting toastr service

toastr

angular-services

angular-toastr

angular