角度问题中的全球消息传递服务

Question

我正在使用Angular 7在Web应用程序上工作，目前，我正在尝试使用API Interceptor来显示发生错误的警报，但是，在添加后，该警报正常工作。消息传递服务和消息传递组件，我尝试使用消息传递来推动错误消息（以在组件的模板中按照我想要的格式化消息），但是，它不起作用，并且没有给我任何错误。无论如何，这是代码

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);
  }
}

这是Dientept的最后一部分，也是Handle Error方法的开始部分。

message.service.ts

export class MessageService {
  messages: string[] = [];
  add(message: string) {
    this.messages.push(message);
  }
  clear() {
    this.messages = [];
  }
  constructor() { }
}

Messags.com.ponent.ts

export class MessagesComponent implements OnInit {
  constructor(public messageService:MessageService) { }
  ngOnInit() {
  }
}

messags.com.ponent.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中注入的服务推动的错误消息。

谢谢

Answer 1

在您的messageService中创建一个Subject如下所示，当一个错误添加到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>