0

我正在使用 ToastrService 显示服务器错误通知。但这似乎不起作用。在 Ui 中，如果由于支持的问题导致获取请求未将数据加载到表格视图中，如何在特定的 UI、组件中显示 Toast 消息？我是否需要在该特定组件中添加诸如超时之类的内容或app.component.ts file.

这是我的 httpInterceptor 类。

@Injectable({
  providedIn: 'root'
})
export class InterceptorService implements HttpInterceptor {
  constructor(public toasterService: ToastrService) { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
     return next.handle(request).pipe(
            tap(evt => {
                if (evt instanceof HttpResponse) {
                    if (evt.body && evt.body.success) {
                        this.toasterService.success(evt.body.success.message, evt.body.success.title, {positionClass: 'toast-bottom-center'});
                    }
                }
            }),
            catchError((err: any) => {
                if (err instanceof HttpErrorResponse) {
                    try {
                        this.toasterService.error(err.error.message, err.error.title, {positionClass: 'toast-bottom-center'});
                    } catch (e) {
                        this.toasterService.error('An error occurred', '', {positionClass: 'toast-bottom-center'});
                    }
                    //log error
                }
                return of(err);
            }));
   }

}

这是我的 app.module.ts 文件

imports: [
  ToastrModule.forRoot(
            {positionClass: 'toast-bottom-center', timeOut: 5000,
                preventDuplicates: true,
                closeButton: true,
                progressBar: true,
                maxOpened: 1,
                autoDismiss: true,
                enableHtml: true},
        ),
],

providers: [
{provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true},
],

这是我的 messageService 类。

export class MessageService {

  constructor(private toastr: ToastrService) { }
   showSuccessWithTimeout(message, title, timespan) {
        this.toastr.success(message, title , {
            timeOut :  timespan
        });
    }
    showError(message, title) {
        this.toastr.error(message, title, {
            enableHtml :  true
        });
    }

}

当请求超时或找不到后端服务器 url 或类似的服务器错误时，我如何向用户显示 Toast 消息？

4

0 回答 0