Angular 14：如何将拦截器/全局错误处理器捕获的错误返回至原页面

你的问题核心在于RouteMessageService里的message返回的是of(returnedMessage)，这是一个冷Observable，组件初始化时订阅它会立即拿到当时的空值，后续服务中更新消息后，这个Observable不会再发射新值，所以页面无法感知到消息变化。

1. 修改RouteMessageService #

把普通字符串换成BehaviorSubject，它能保存当前最新值，并且新订阅者会立即收到当前值，更新时通过next()发射新值：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class RouteMessageService {
  private _message$ = new BehaviorSubject<string>('');

  // 对外暴露只读的Observable
  get message$(): Observable<string> {
    return this._message$.asObservable();
  }

  set message(val: string) {
    this._message$.next(val);
    console.log("in Router Message : " + val);
  }

  clear() {
    this._message$.next('');
  }
}

2. 调整拦截器代码 #

修改设置消息的方式，对应新的setter：

private handleServerSideError(error: HttpErrorResponse): boolean {
  let handled: boolean = false;

  switch (error.status) {
    case 400:
      this.routeMessageService.message = "Data would be truncated: please try again.";
      console.log("got here 2: " + error.message);
      handled = true;
      break;
  }
  return handled;
}

3. 组件中更新订阅逻辑 #

组件里直接订阅服务的message$Observable：

constructor(private errorService: RouteMessageService,
    private route: ActivatedRoute,
    private authService: AuthService) {
}

// 声明变量时直接取服务的message$
msg$: Observable<string> = this.errorService.message$;

4. 模板中使用 #

保持模板不变，注意变量名改为符合Angular Observable惯例的msg$：

{{ msg$ | async }}

这样修改后，当拦截器设置错误消息时，BehaviorSubject会发射新值，组件通过async管道订阅的Observable会自动更新，页面就能显示错误信息了。

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