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

Я использую: Angular V6.1.0, Angular Material 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);
  }
}


typescript angular angular-observable angular6 angular-material-6
person Simón Farias    schedule 04.11.2018    source источник
comment
Так в чем именно ваша проблема?   -  person Jeto    schedule 05.11.2018
comment
Служба не может отображать MatSnackBar, у меня есть центральная служба, которая перехватывает все ошибки HTTP 4xx в каждом запросе и показывает их.   -  person Simón Farias    schedule 05.11.2018
comment
Вы получаете сообщение об ошибке? Вы уверены, что ваш метод handleError выполнен? Можете ли вы показать, в каком контексте это называется?   -  person Jeto    schedule 05.11.2018
comment
Нет, я не получаю ошибку. Это проблема архитектуры. Поскольку, естественно, вы не можете отобразить MatSnackBar в сервисе, вы должны обязательно вызвать его в компоненте. Вот что-то похожее на то, что происходит со мной: stackoverflow.com/questions/42761039/ Но это не работает (ну, не для меня).   -  person Simón Farias    schedule 05.11.2018
comment
Вы можете отобразить MatSnackBar из службы (хотя это может показаться немного подозрительным), нет причин, по которым вы не должны этого делать. Пример StackBlitz.   -  person Jeto    schedule 05.11.2018

Ответы (3)


arrow_upward
5
arrow_downward

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

custom-snackbar.service.ts

import { Injectable, NgZone } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';

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

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

Добавьте MatSnackBarModule к app.module.ts:

import { MatSnackBarModule } from '@angular/material/snack-bar';

...
imports: [
    BrowserModule,
    AppRoutingModule,
    MatSnackBarModule,
],
...

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

Затем в error-service.ts:

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

arrow_upward
1
arrow_downward

Используйте жирную стрелку ()=> вместо функции на handleError

public handleError = (error: HttpErrorResponse | any) => {
    this.snackBar.open('Error message: '+error.error.error, 'action', {
      duration: 4000,
    });
    return throwError(error);
  }
person Makhele Sabata    schedule 14.11.2020

arrow_upward
0
arrow_downward

Вопрос касается кода по умолчанию, который вы пишете в функции «ошибка» любого наблюдаемого, чтобы сделать HTTP-запрос и установить общее действие по умолчанию в случае получения любого ответа об ошибке HTTP 4xx от API (для моего конкретного случая отобразите MatSnackBar с ошибкой). Ну, я нашел решение, перезаписав ErrorHandle 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);
    }
  }
}

А это мой модуль ng:

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 { }

person Simón Farias    schedule 05.11.2018