Как я могу отобразить MatSnackBar из сервиса с угловым материалом? - PullRequest
Новая
       39

Как я могу отобразить MatSnackBar из сервиса с угловым материалом?

0 голосов
/ 05 ноября 2018

Я использую: Угловой V6.1.0, Угловой Материал V6.4.1

Я пытаюсь поймать ошибки HTTP и показать их с помощью MatSnackBar. Я стараюсь показать это в каждом компоненте моего приложения (где есть HTTP-запрос). Чтобы не делать повторяющийся код

В противном случае я должен повторить один и тот же код в каждом компоненте для отображения MatSnackBar с вставленными ошибками.

Это мой сервис: 

import { Injectable } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';
// import { HttpClient, HttpErrorResponse, HttpRequest } from '@angular/common/http';
import { Observable, throwError, of, interval, Subject } from 'rxjs';
import { map, catchError, retryWhen, flatMap } from 'rxjs/operators';
import { url, ErrorNotification } from '../globals';
import { MatSnackBar } from '@angular/material';
import { ErrorNotificationComponent } from '../error-notification/error-notification.component';


@Injectable({
  providedIn: 'root'
})
export class XhrErrorHandlerService {
  public subj_notification: Subject<string> = new Subject();

  constructor(
    public snackBar: MatSnackBar
    ) {

  }

  public handleError (error: HttpErrorResponse | any) {
    this.snackBar.open('Error message: '+error.error.error, 'action', {
      duration: 4000,
    });
    return throwError(error);
  }
}

Ответы [ 2 ]

0 голосов
/ 05 ноября 2018

Вопрос о коде по умолчанию, который вы пишете в функции «ошибка» любого наблюдаемого, чтобы сделать HTTP-запрос и установить универсальное действие по умолчанию в случае получения любой ошибки HTTP 4xx-ответа от API (для моего конкретного случая , отобразите MatSnackBar с ошибкой). Ну, я нашел решение, переписав ErrorHandle of Angular, реализуя это: https://angular.io/api/core/ErrorHandler

Это мой XhrErrorHandlerService 

import { Injectable, ErrorHandler, Injector, NgZone } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';
import { MatSnackBar } from '@angular/material';


@Injectable({
  providedIn: 'root'
})
export class XhrErrorHandlerService implements ErrorHandler{

  constructor(
    private injector: Injector,
    public snackBar: MatSnackBar,
    private readonly zone: NgZone
  ) {}

  handleError(error: Error | HttpErrorResponse){
    if (error instanceof HttpErrorResponse) {
      for (var i = 0; i < error.error.length; i++) {
        this.zone.run(() => {
          const snackBar = this.snackBar.open(error.error[i], error.status + ' OK', {
            verticalPosition: 'bottom',
            horizontalPosition: 'center',
            duration: 3000,
          });
          snackBar.onAction().subscribe(() => {
            snackBar.dismiss();
          })
        });
      }
    }
    else{
      console.error(error);
    }
  }
}

А это мой нг Модуль: 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HTTP_INTERCEPTORS } from '@angular/common/http';

import * as moment from 'moment';

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

//ANIMATIONS
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

//ANGULAR MATERIAL
import { MaterialModule } from './amaterial.module';

//SERVICES
import { AuthService } from './services/auth.service';
import { XhrErrorHandlerService } from './services/xhr-error-handler.service';

//RUTAS
import { RouteRoutingModule } from './route-routing.module';

//INTERCEPTOR
import { AuthInterceptor } from './http-interceptor/auth-interceptor';


@NgModule({
  declarations: [
    AppComponent,
  ],
  entryComponents: [],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
    RouteRoutingModule,
    EntryComponentModule,
    HttpClientModule,
    FormsModule, 
    ReactiveFormsModule
  ],
  providers: [
    AuthService, 
    XhrErrorHandlerService,
    { provide: ErrorHandler, useClass: XhrErrorHandlerService }
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
0 голосов
/ 05 ноября 2018

Создать сервис с этим:

custom-snackbar.service.ts

@Injectable()
export class CustomSnackbarService {
    constructor(
      public snackBar: MatSnackBar,
      private zone: NgZone
    ) {

    }

    public open(message, action = 'success', duration = 4000) {
        this.zone.run(() => {
          this.snackBar.open(message, action, { duration });
        }
    }
}

Также его нужно запустить в ngZone: https://github.com/angular/material2/issues/9875

Тогда в error-service.ts: 

public handleError (error: HttpErrorResponse | any) {
  customSnackbarService.open(error, 'error')
  return throwError(error);
}
...