Angular 如何显示带有角度材质的服务中的Matsnakbar？

Im使用：Angular V6.1.0，Angular Material V6.4.1

我试图捕捉HTTP错误并使用Matsnakbar显示它们。我试图在我的应用程序的每个组件（有http请求的组件）中显示这一点。以免重复代码

否则，我应该在每个组件中重复相同的代码，以显示插入错误的Matsnakbar

这是我的服务：

从'@angular/core'导入{Injectable}；
从“@angular/common/http”导入{HttpErrorResponse}；
//从'@angular/common/http'导入{HttpClient，HttpErrorResponse，HttpRequest}；
从“rxjs”导入{可观察、投掷、of、间隔、主题}；
从“rxjs/operators”导入{map、catchError、retryWhen、flatMap}；
从“../globals”导入{url，ErrorNotification}；
从“@angular/material”导入{matsnakbar}；
从“../error notification/error notification.component”导入{ErrorNotificationComponent}；
@注射的({
providedIn:'根'
})
导出类XhrErrorHandlerService{
公共主题通知：主题=新主题（）；
建造师(
公共快餐店：Matsnakbar
) {
}
公共句柄错误（错误：HttpErrorResponse | any）{
this.snackBar.open（'错误消息：'+Error.Error.Error，'操作'{
持续时间：4000，
});
返回投掷器（错误）；
}
}

使用以下内容创建服务：

自定义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 });
        });
    }
}

将

matsnakbarmodule

添加到

app.module.ts

：

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

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

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

此外，还需要在ngZone中运行：

然后在

错误服务.ts

中：

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

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

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

---

问题是关于您在任何observable的“error”函数中编写的默认代码，以在从API获取任何错误HTTP 4xx响应的情况下发出HTTP请求并默认建立一般操作（对于我的特定情况，显示带有错误的Matsnakbar）。我找到了解决方案，写下了Angular实现的ErrorHandle：

这是我的XhrErrorHandlerService

从'@angular/core'导入{Injectable，ErrorHandler，Injector，NgZone}；
从“@angular/common/http”导入{HttpErrorResponse}；
从“@angular/material”导入{matsnakbar}；
@注射的({
providedIn:'根'
})
导出类XhrErrorHandlerService实现ErrorHandler{
建造师(
专用注射器：注射器，
公共小吃店：Matsnakbar，
专用只读区域：NgZone
) {}
handleError（错误：错误| HttpErrorResponse）{
if（HttpErrorResponse的错误实例）{
对于（变量i=0；i{
const snackBar=this.snackBar.open（error.error[i]，error.status+'OK'{
垂直位置：“底部”，
水平位置：'中心'，
时长：3000，
});
snackBar.onAction（）.subscribe（（）=>{
snackBar.disclose（）；
})
});
}
}
否则{
控制台错误（error）；
}
}
}

使用胖箭头

（）=>

代替

手柄上的函数错误

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

---

那么你的问题到底是什么呢？该服务无法显示Matsnakbar，我有一个中央服务，它捕获每个请求中的每个4xx HTTP错误并显示它们。你收到错误了吗？您确定执行了

handleError

方法吗？你能告诉我它是在什么环境下被调用的吗？不，我没有收到错误。这是一个建筑问题。因为您自然不能在服务中显示MatsnakBar，所以必须强制地在组件中调用它。这里有一些类似于发生在我身上的事情：但它不起作用（好吧，对我来说不是）。你可以从服务中显示Matsnakbar（尽管它可能看起来有点可疑），没有理由你不应该。