我正在使用角度7工作在一个Web应用程序,目前我正在尝试使用Api拦截器显示错误已发生的警报,但工作正常但是,在添加消息传递服务和消息传递组件后,我试图推送使用消息传递的错误消息(在组件的模板中按我想要的格式化消息)但是,它不起作用,它没有给我任何错误。无论如何,这是代码
Api Interceptor.ts
return next.handle(apiReq).pipe(
retry(3),
catchError(this.handleError)
);
}
handleError(error: HttpErrorResponse) {
let errorMessage = '';
if (error.error instanceof ErrorEvent) {
//client Side Error
errorMessage = `Error: ${error.error.message}`;
} else {
//server side
errorMessage = `Error: ${error.status}\nMessage: ${error.message}`;
}
window.alert(errorMessage);
console.log('An Error has Occured');
this.messageService.add(errorMessage);
return throwError(errorMessage);
}
}
这是截距的最后一部分和handleError方法的开始部分。
message.service.ts
export class MessageService {
messages: string[] = [];
add(message: string) {
this.messages.push(message);
}
clear() {
this.messages = [];
}
constructor() { }
}
messages.component.ts
export class MessagesComponent implements OnInit {
constructor(public messageService:MessageService) { }
ngOnInit() {
}
}
messages.component.html
<div *ngIf="messageService.messages.length">
<h2>Messages</h2>
<button class="clear"
(click)="messageService.clear()">clear</button>
<div *ngFor='let message of messageService.messages'> {{message}} </div>
</div>
我的目标是显示在messages.component中动态格式化的错误消息,并由Api Interceptor中注入的服务推送。
谢谢
在你的Subject
中创建一个messageService
如下,当一个错误被添加到messages
数组时,你应该用messages数组调用next()
方法。
export class MessageService {
messages: string[] = [];
messages$: new Subject<any>();
add(message: string) {
this.messages.push(message);
this.messages$.next(this.messages);
}
clear() {
this.messages = [];
}
constructor() { }
}
在组件中,每当更改消息添加到消息数组时,都应更新DOM,因此您必须按如下方式订阅message$
主题
export class MessagesComponent implements OnInit {
public messages: Array<any> = [];
constructor(public messageService:MessageService) { }
ngOnInit() {
this.messageService.messages$.subscribe(messages => this.messages = messages);
}
}
你的html应该是
<div *ngIf="messages.length">
<h2>Messages</h2>
<button class="clear"
(click)="messageService.clear()">clear</button>
<div *ngFor='let message of messages'> {{message}} </div>
</div>