Angular全局展示API错误横幅：拦截器已就绪，求实现方案

1. 创建全局错误状态服务 #

通过服务维护错误状态，用BehaviorSubject实现跨组件的状态同步，确保横幅能实时响应错误变化：

// error.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ErrorService {
  private errorSubject = new BehaviorSubject<string | null>(null);
  public error$: Observable<string | null> = this.errorSubject.asObservable();

  setError(message: string): void {
    this.errorSubject.next(message);
  }

  clearError(): void {
    this.errorSubject.next(null);
  }
}

2. 创建全局错误横幅组件 #

生成组件并订阅错误服务的状态，实现显示/隐藏逻辑和关闭功能：

// global-error-banner.component.ts
import { Component, OnInit } from '@angular/core';
import { ErrorService } from '../error.service';

@Component({
  selector: 'app-global-error-banner',
  templateUrl: './global-error-banner.component.html',
  styleUrls: ['./global-error-banner.component.css']
})
export class GlobalErrorBannerComponent implements OnInit {
  currentError: string | null = null;

  constructor(private errorService: ErrorService) {}

  ngOnInit(): void {
    this.errorService.error$.subscribe(error => {
      this.currentError = error;
    });
  }

  onClose(): void {
    this.errorService.clearError();
  }
}

组件模板（global-error-banner.component.html）：

<div *ngIf="currentError" class="error-banner">
  <span>{{ currentError }}</span>
  <button (click)="onClose()" class="close-btn">&times;</button>
</div>

基础样式（global-error-banner.component.css）：

.error-banner {
  background-color: #dc3545;
  color: #fff;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.close-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}

3. 挂载横幅到根组件 #

打开app.component.html，将横幅组件放在路由出口上方，确保所有页面都能显示：

<app-global-error-banner></app-global-error-banner>
<router-outlet></router-outlet>

4. 在Interceptor中触发错误提示 #

修改已有的Interceptor，在捕获GET请求错误时调用错误服务的方法：

// api.interceptor.ts
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpErrorResponse } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';
import { ErrorService } from './error.service';

@Injectable()
export class ApiInterceptor implements HttpInterceptor {
  constructor(private errorService: ErrorService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler) {
    if (request.method === 'GET') {
      return next.handle(request).pipe(
        catchError((error: HttpErrorResponse) => {
          const errorMsg = error.status === 404 ? '请求资源不存在' : '数据加载失败，请稍后重试';
          this.errorService.setError(errorMsg);
          // 继续抛出错误，允许组件层面做额外处理
          return throwError(() => error);
        })
      );
    }
    return next.handle(request);
  }
}

额外优化点 #

• 可根据HTTP错误状态码（如401、500）设置不同提示文案
• 给错误横幅添加自动隐藏逻辑：在ErrorService的setError方法中加入定时器，一段时间后自动调用clearError
• 调整横幅样式适配项目UI设计

内容的提问来源于stack exchange，提问作者CBP