Angular13拦截器如何向自定义错误组件传递HTTP错误数据

推荐方案：路由状态传值（无URL暴露） #

该方案无需额外创建服务，参数不会拼接在浏览器地址栏，适合一次性跳转传递错误信息的场景。

• 修改拦截器中的跳转逻辑，在navigate方法中通过state参数传递错误信息：

error: (err: HttpErrorResponse) => {
  if (err.status === <whichever> && err.statusText === '<text>') {
    this.router.navigate(['error'], {
      state: { errorMsg: err.message }
    });
  }
  // 原有剩余错误处理逻辑保持不变
}

• 在ErrorComponent的ngOnInit生命周期中读取路由传入的状态，赋值给msg变量，同时做好空值兼容：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  // 组件原有selector、templateUrl等配置保持不变
})
export class ErrorComponent implements OnInit {
  msg: string = '';

  constructor(private router: Router) {}

  ngOnInit(): void {
    // 注意：必须在ngOnInit阶段读取，导航完成后getCurrentNavigation()会返回null
    const navState = this.router.getCurrentNavigation()?.extras.state as { errorMsg?: string };
    this.msg = navState?.errorMsg || '系统未知错误，请稍后重试';
  }
}

注意：该方案下如果用户跳转至错误页后手动刷新页面，state数据会丢失，会自动展示兜底的默认错误文案。如果需要刷新后保留错误信息，可选用下方共享服务方案。

备选方案：全局共享服务传值 #

适合需要传递复杂错误对象、错误页存在多个触发入口的场景。

• 创建全局单例的错误服务，用于暂存错误信息：

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ErrorService {
  currentErrorMsg = '';
}

• 拦截器中注入ErrorService，跳转前先存入错误信息：

// 构造函数中注入private errorService: ErrorService
error: (err: HttpErrorResponse) => {
  if (err.status === <whichever> && err.statusText === '<text>') {
    this.errorService.currentErrorMsg = err.message;
    this.router.navigate(['error']);
  }
}

• ErrorComponent初始化时从服务读取错误信息，读取后清空缓存避免数据残留：

import { Component, OnInit } from '@angular/core';
import { ErrorService } from './error.service'; // 替换为实际服务路径

@Component({
  // 组件原有配置保持不变
})
export class ErrorComponent implements OnInit {
  msg: string = '';

  constructor(private errorService: ErrorService) {}

  ngOnInit(): void {
    this.msg = this.errorService.currentErrorMsg || '系统未知错误，请稍后重试';
    this.errorService.currentErrorMsg = ''; // 清空缓存
  }
}

方案选型说明 #

• 路由state方案实现成本最低，无额外冗余代码，适合绝大多数单入口触发错误页的场景
• 共享服务方案灵活性更高，支持传递复杂结构的错误对象，多入口触发时逻辑更统一
• 不建议使用QueryParams传递错误信息，该方式会将错误明文暴露在地址栏，长错误文本存在URL长度截断风险，仅适合传递极短的错误编码场景

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