在服务中使用地图运算符并在组件中订阅时的 RxJS BehaviouSubject

Question

我是 RxJS 中 BehaviourSubject 的新手，我正在尝试使用它来跨组件共享数据。我不确定如何使用它。我组件中的代码是

export class CarsListComponent implements OnInit {
  cars: Cars[] = []; 
  constructor(private carsListService: CarsListService) { }


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

我服务中的代码是

 export class CarsService {

 constructor(private http: HttpClient) {}

 getCars(): Observable<Car[]> {
    return this.http.get<Car[]>(url,headers)
    .pipe(
        map(response => response)
    );
 }
}

我不知道如何使用 BehaviourSubject 以及如何实现它。请帮我解决这个问题。

Answer 1

根据这个问题，我认为您正试图在多个组件中使用相同的 this.cars。如果您想共享它，那么使用 BehaviorSubject 是一种方法，因为即使已经订阅它，它也会存储值。

让我们创建一个将被注入多个组件的共享服务说 app-shared.service.ts

app-shared.service.ts :

import { Injectable } from '@angular/core';
import { BehaviorSubject , Observable} from 'rxjs';

@Injectable()
export class AppSharedService {

  carsListSubjectt : BehaviorSubject<Cars[]> = new BehaviorSubject<Cars[]>([]);

  constructor() { }


  updateCarsList(cars : Cars[]) : void{
    this.carsListSubjectt.next(cars);
  }


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

}



export interface Cars{
  carType : string ;
  manufacturedDate : Date;
  condition : string;
}

注意： Cars接口只是我的定义。使用您的定义。

现在您只需 inject 所需组件中的 app-shared.service。

要更新数据，请使用您的代码：

export class CarsListComponent implements OnInit {
  cars: Cars[] = []; 
  constructor(private carsListService: CarsListService, private _appSharedService : AppSharedService) { }


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

您只需订阅 app-shared.service 中定义的 getCarsList()，因为它将 return 和 Observable<Cars[]> .

如果有帮助请告诉我:)

Answer 2

在服务中可以使用shareReplay

cars$ = this.http.get<Car[]>(url,headers).pipe(
  shareReplay()
);

使用异步管道

cars$ = this.carsListService.cars$;

并在模板中

<ng-container *ngIf="cars$ | async as cars">
  Do stuff with cars here
  {{ cars | json }}
</ng-container>

无需订阅和退订

在服务中使用地图运算符并在组件中订阅时的 RxJS BehaviouSubject

RxJS BehaviouSubject when using map operator in service and subscribing in the component

observable

rxjs

behaviorsubject

angular