Angular 14如何让被拦截器或全局错误处理程序捕获的错误返回到原始页面

Question

所以我已经尝试使用错误拦截器和全局错误处理程序，但我不能得到错误回到我的原始页面。我希望能够向用户显示页面上的错误。在我的测试用例中，我强制一个服务器端错误。

所以我创建了以下RouteMessageService:

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class RouteMessageService {
private _message: string = '';
get message(): Observable<string> {
const returnedMessage = this._message;
this.clear();
return of(returnedMessage);
}
set messages(val: string) {
this._message = val;
console.log("in Router Message : " + val);
}
clear() {
this.messages = '';
}
}

然后在我的拦截器中，我有以下内容:

......
private handleServerSideError(error: HttpErrorResponse): boolean {
let handled: boolean = false;
switch (error.status) {
case 400:
this.routeMessageService.messages = "Data would be truncated: please try again.";
console.log("got here 2: " + error.message);
handled = true;
break;

}
return handled;
}

这个被击中，并且消息在我的RouteMessageService中被正确设置。

在我的页面后面的代码中，我将服务传递给我的构造函数:

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

和我声明了一个变量:

msg: Observable<string> = this.errorService.message;

那么在这一页我有:

{{ msg | async}}

消息永远不会显示。如果我也使用全局错误处理程序，行为是相同的。

Answer 1

尝试在messageService中使用Subject()，并在所需的组件中订阅它。

const messages= new Subject<string>();   

this.routeMessageService.messages.next("Data would be truncated: please try again.");