角度问题中的全局消息服务

问题描述 投票:0回答:1

我正在使用角度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中注入的服务推送。

谢谢

angular angular-services
1个回答
1
投票

在你的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>
© www.soinside.com 2019 - 2024. All rights reserved.