angular - 防止通过 toastie 显示多个错误

问题描述

我在我的 Angular 8 应用程序中实现，并在服务离线httpinterceptor时重定向到页面。systemmaintenance我还通过警报服务显示 toastie 消息。目前正在发生的事情是，除了没有网络消息之外，系统还会发出许多错误消息。

throwError(error);所以基本上 catch 块正在多次执行返回，因此您可以看到多条消息。

在显示第一条 toastie 消息后如何停止？

出现这些消息的一个原因还在于，一旦用户尝试导航到该页面，方法就会触发以从后端获取数据，并且由于服务处于脱机状态，因此会引发来自相应方法的错误消息。我是否需要阻止用户访问组件本身并在路由器中处理它，或者我是否需要管理他们抛出的 toastie 消息。我觉得在路由器中处理对我来说很有意义，但不知道该怎么做

这就是this.alertService.resetStickyMessage()在httpwebinterceptor

 private stickyMessages = new Subject<AlertMessage>();

 export class AlertMessage {
    constructor(public severity: MessageSeverity, public summary: string, public detail: string, public timeOutSeconds?: number) { }
  }

  resetStickyMessage() {
        this.stickyMessages.next();
    }

Http拦截器类

@Injectable()
export class HttpWebInterceptor implements HttpInterceptor {

    constructor(public router: Router,
        private authService: AuthService,
        private alertService: AlertService
    ) { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        if (!request.headers.has('Content-Type')) {
            request = request.clone({ headers: request.headers.set('Content-Type', 'application/json') });
        }

        return next.handle(request).pipe(
            map((event: HttpEvent<any>) => {
                if (event instanceof HttpResponse) {
                    console.log('event', event);
                    if(event.status == HttpStatusCode.OK)
                    {
                         if (this.router.url == '/offline') {
                             // Website is back online
                             console.log('redirecting to login');
                             this.authService.gotoLoginPage();
                        }
                    }
                }
                return event;
            }),
            catchError((error: HttpErrorResponse) => {
                if (error.error instanceof Error) {
                    // A client-side or network error occurred. Handle it accordingly.
                    if(isDevMode()) console.error('An error occurred:', error.error.message);
                } 
                else 
                {
                    if(isDevMode()) 
                        console.error('Backend returned code ${error.status}, body was: ${error.error}');

                    switch(error.status)
                    {
                        case HttpStatusCode.Unknown:
                        {
                            if (this.router.url != '/offline')
                            {
                                this.authService.clearUserData();
                                this.alertService.resetStickyMessage();
                                this.alertService.showMessage("No Network", "The server cannot be reached", MessageSeverity.error);
                                this.router.navigate(['offline']);
                                break;
                            }
                        }
                        default:
                            break;
                    }
                }

                return throwError(error);
            }));

    }
}

显示消息

showMessage(summary: string)
    showMessage(summary: string, detail: string, severity: MessageSeverity, timeOutSeconds?: number)
    showMessage(summaryAndDetails: string[], summaryAndDetailsSeparator: string, severity: MessageSeverity)
    showMessage(response: HttpResponseBase, ignoreValue_useNull: string, severity: MessageSeverity)
    showMessage(data: any, separatorOrDetail?: string, severity?: MessageSeverity, timeOutSeconds?: number) {

        if (!severity)
            severity = MessageSeverity.default;

        if (data instanceof HttpResponseBase) {
            data = Utilities.getHttpResponseMessage(data);
            separatorOrDetail = Utilities.captionAndMessageSeparator;
        }

        if (data instanceof Array) {
            for (let message of data) {
                let msgObject = Utilities.splitInTwo(message, separatorOrDetail);
                this.showMessageHelper(msgObject.firstPart, msgObject.secondPart, severity, false);
            }
        }
        else {
            this.showMessageHelper(data, separatorOrDetail, severity, false, timeOutSeconds);
        }
    }

标签： angular

angular - 防止通过 toastie 显示多个错误

问题描述

解决方案

推荐阅读