尝试从第二个组件获取时，行为主题值为空 [英] Behaviour subject value is empty when trying to fetch from a second component

问题描述

我正在尝试使用BehaviourSubject和共享服务在Angular 8中的两个组件之间共享数据.组件1中的代码如下所示.

I am trying to share data between two components in Angular 8 using BehaviourSubject and a shared service. The code in component 1 is shown below.

constructor(private appSharedService: AppSharedService) { }

 ngOnInit() {
   this.appSharedService.getCars()
  .subscribe(response => {
    this.cars = response;
    this.appSharedService.updateCarsList(this.cars);
  }, error => {
    console.log(error);
  });
  }

共享的应用程序共享服务中的代码为

The code in the shared app-shared service is

export class AppSharedService {

carsSubject : BehaviorSubject<Car[]> = new BehaviorSubject<Car[]>([]);

cars: Observable<Car[]>;

constructor(private http: HttpClient) { }

 getCars (): Observable<Car[]> {
  if (!this.cars) {
    this.cars = this.http.get<Car[]>('url', headers)
    .pipe(
        map( response => response),
        publishReplay(1), // caching the response
        refCount()        
    );
  }
   return this.cars;
 }

 updateCarsList(cars : Car[]) : void{
   this.carsSubject.next(cars);
 }

 getCarsList(): Observable<Car[]>{
   return this.carsSubject.asObservable();
 }
}

因此，我最初是进行API调用以获取数据，然后将其缓存，因此我不再进行API调用.在获取组件1中的数据之后，我调用this.appSharedService.updateCarsList(this.cars)来更新共享服务中的this.carsSubject值.现在，我尝试在组件2中访问此更新的值，如下所示.组件2中的代码是

So I am initially making an API call to fetch data and then caching it so I don't make further API calls. After getting the data in component 1, I call this.appSharedService.updateCarsList(this.cars) to update this.carsSubject value in the shared service. Now I am trying to access this updated value in the component 2 as shown below. The code in component 2 is

this.appSharedService.getCarsList()
  .subscribe(response => {
    this.cars = response; // response is always empty
  }, error => {
    this.handleError(error);
  });

问题是我在组件2中获得的响应值始终为空.我不明白为什么我无法在组件2中获得更新的BehaviourSubject值.请帮我解决这个问题.

The problem is the response value I am getting in above component 2 is always empty. I don't understand why I can't get updated BehaviourSubject value in component 2. Please help me out with this.

推荐答案

尝试一下:

AppSharedService

export class AppSharedService implements OnInit {

private carsSubject : BehaviorSubject<Car[]>;
public carsList$(): Observable<Car[]>;

constructor(private http: HttpClient) {
  this.carsSubject = new BehaviorSubject<Car[]>([]);
  this.carsList$ = this.carsSubject.asObservable();
}

ngOnInit(): void {
  this.http.get<Car[]>('url', headers).pipe(first()).subscribe(
     (cars) => {
       this.carsSubject.next(cars);
     }
  );
}

 updateCarsList(cars : Car[]) : void{
   this.carsSubject.next(cars);
 }
}

然后必须在组件中执行以下操作:

Then in your components you have to do:

this.appSharedService.carsList$
  .subscribe(response => {
    this.cars = response;
  }, error => {
    this.handleError(error);
  });

让我们解释一下我在AppSharedService中所做的事情.实例化AppSharedService时，您将执行http请求并将值保存在BehaviorSubject中.然后，当组件订阅carsList $时，如果http请求已经完成，则它们将接收存储在BehaviorSubject中的值，另一方面，如果http请求未完成，但当http请求将完成.

Let's explain what I did in the AppSharedService. when the AppSharedService is instantiated you are going to do the http request and save the value in the BehaviorSubject. Then when the components subscribe to the carsList$, if the http request was already done they are going to receive the value stored in the BehaviorSubject, on the other hand if the http request wasn't completed yet they will receive the cars list when the http request will complete.

这篇关于尝试从第二个组件获取时，行为主题值为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！