Service d'injection toastr angulaire

Question

Je veux gérer les erreurs HTTP courantes en utilisant les matériaux angulaires mdsnackbar service, cependant, je ne peux pas comprendre comment l'implémenter. Il me donne une erreur comme ne correspond à aucun type de paramètre si j'ajouter à MdSnackBar au constructeur comme private mdsnackbar: MdSnackBar cause de la classe elle-même en utilisant super

Je voudrais savoir s'il y a une autre façon de achive le même résultat.

http-intercepteur

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], 
    }, 

j'ai mise à jour des dépendances sur les deux http.service.ts et app.module.ts et cela a fonctionné comme un CHARMM.

Answer 1

Vous devez l'ajouter à la liste des paramètres constructeur

@Injectable() 

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

Vous devez également fournir ToastrService quelque part il peut être injecté.

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

MdSnackBar doit également être fourni quelque part, par exemple en important le module qui le fournit.