Angular/rxjs/Subject/BehaviorSubject在多个组件之间共享http服务数据 [英] Angular/rxjs/Subject/BehaviorSubject share http service data across multiple components

问题描述

将问题跟到使用Angular2中的服务在组件之间共享数据，然后得到一个响应.

Follow up question to Share data between components using a service in Angular2 and a response I got.

我正在尝试共享服务提供商通过GET检索的数据. 组件结构如下，主要路线分别指向CustomerPortalDashboardComponent和DocumentsComponent

I'm trying to share data that a service providers retrieves via a GET. The component structure is as follows with the main routes going to CustomerPortalDashboardComponent and DocumentsComponent

<CustomerPortalBaseComponent>
 <router-outlet>
  <CustomerPortalDashboardComponent/> 
  <DocumentsComponent/>
 <router-outlet>
</CustomerPortalBaseComponent>

CustomerPortalBaseComponent进行调用以获取用户信息:

CustomerPortalBaseComponent makes a call to get user info:

ngOnInit() {
this.customerPortalUserService.getUserInfo()
  .subscribe(
    (event: HttpEvent<any>) => {
      switch (event.type) {
        case HttpEventType.Sent:
          break;
        case HttpEventType.Response:
          this.handleUserData(event.body)

      }
    },
    (err: HttpErrorResponse) => {
      if (err.error instanceof Error) {
        console.log("Client-side error occured.");
      } else {           
        console.log("Server-side error occured.");
      }
    }
  )
}
 handleUserData(data: any){
  this.userData = data;
}

CustomerPortalUserService

CustomerPortalUserService

getUserInfo(){
interface ItemsResponse {
  results: string[];
}
return  this.http.get<ItemsResponse>(this.userUrl,  {
  observe: 'response',
  headers: new HttpHeaders().set(),
})
}

在CustomerPortalDashboardComponent和DocumentsComponent中获取userData并确保在其他组件尝试获取数据之前已获取数据的最佳方法是什么?

What is the best way to get the userData in CustomerPortalDashboardComponent and DocumentsComponent and ensure that the data has been retrieved before the other components try and get it?

推荐答案

使用共享服务解决了此问题.在执行共享服务中的BUT之前，我正在使用主体而不是BehaviorSubject.该主题未缓存数据，因此我认为我的设计模式无法正常工作.当更改为BehaviorSubject时，一切运行正常.

Solved this by using a shared service. I was doing this before BUT in my shared service I was using a Subject instead of a BehaviorSubject. The Subject does not cache data so I thought my design pattern was not working. When changed to a BehaviorSubject everything worked perfectly.

CustomerPortalBaseComponent对将在此应用程序模块之间共享的数据进行所有HTTP调用.然后，它将消息发送到共享服务，其他组件(用于路由的主要组件)订阅该服务.例如:

CustomerPortalBaseComponent makes all the HTTP calls for data that will be shared across this app module. It then sends the message to shared service and the other components (main components for route) subscribe to that service. EX:

CustomerPortalBaseComponent

CustomerPortalBaseComponent

this.applicationsMessagingService.sendMessage(data)

ApplicationsMessagingService:

ApplicationsMessagingService:

Injectable()
export class ApplicationsMessagingService {

  private subject = new BehaviorSubject<any>(null);

  sendMessage(message: {}) {
   this.subject.next(message);
  }

  clearMessage() {
   this.subject.next(null);
 }

  getMessage(): Observable<any> {
   return this.subject.asObservable();
  }

}

CustomerPortalDashboardComponent

CustomerPortalDashboardComponent

ngOnInit() {
this.subscription = this.applicationsMessagingService.getMessage().subscribe(message => {
  this.message = message;
  this.handleApplicationData(this.message);
});


handleApplicationData(data: any){
  if (data){
   this.applicationData = data;
 }
}

applicationData然后传递到子组件并通过@input接收

applicationData is then passed to child components and received via @input

这篇关于Angular/rxjs/Subject/BehaviorSubject在多个组件之间共享http服务数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！