服务值更改时更新组件值Angular 8

Question

我有一个 Angular 8 项目，其中包含两个同级组件，它们都使用服务来更新餐厅数据。本质上，我有一个组件显示从 api 抓取的餐馆列表，还有一个兄弟组件可以过滤第一个组件显示的餐馆。我正在使用一项服务来获取和设置餐厅列表，但我的代码目前没有填充任何加载数据。这是我的组件和服务的代码

餐厅.service.ts

@Injectable()
export class EatstreetService {

  radius;
  address;
  public restaurants: BehaviorSubject<any> = new BehaviorSubject<any>(null);

  constructor(private httpClient: HttpClient) { }

  public setRestaurant(){
    let params = new HttpParams();
    params = params.append('method', 'delivery');
    params = params.append('pickup-radius', this.radius);
    params = params.append('street-address', this.address);
    params = params.append('access-token', this.token)
    this.restaurants.next(this.httpClient.get(`https://api.com/publicapi/v1/restaurant/search`, {params}))
  }


  public getRestaurant(): Observable<any>{

    return this.restaurants.asObservable();
  }
}

ResturantsFilter.component.ts

export class LocationComponent implements OnInit {
  restaurants;
  radius;
  address;

  constructor(private eatstreetService: EatstreetService) { }

  setRestaurants() {
    this.eatstreetService.setRestaurant()
  }

  getRestaurants() {
    this.eatstreetService.getRestaurant().subscribe((data) => {
      console.log(data['restaurants']);
      this.restaurants = data['restaurants'];
    })
  }

  onSelect(): void {
    this.setRestaurants()
  }

  ngOnInit() {
    this.setRestaurants()
    this.getRestaurants()
  }

}

ResturantsList.component.ts

export class CardsComponent implements OnInit {
  restaurants;

  constructor(private eatstreetService: EatstreetService) { }

  getRestaurants() {
    this.eatstreetService.getRestaurant().subscribe((data) => {
      console.log(data['restaurants']);
      this.restaurants = data['restaurants'];
    })
  }
  setRestaurants() {
    this.eatstreetService.setRestaurant()
  }

  ngOnInit() {
    this.getRestaurants()
  }
}

我发现了很多与此相关的问题，但没有一个解决方案对我有用。

Answer 1

您需要在 http 获取响应后通过 BehaviorSubject 发出值：

 @Injectable()
    export class EatstreetService {

      radius;
      address;
      public restaurants: = new ReplaySubject(1);

      constructor(private httpClient: HttpClient) { }

      public setRestaurant(){
        let params = new HttpParams();
        params = params.append('method', 'delivery');
        params = params.append('pickup-radius', this.radius);
        params = params.append('street-address', this.address);
        params = params.append('access-token', this.token)
        this.httpClient.get(`https://api.com/publicapi/v1/restaurant/search`, {params})
                     .subscribe(resp => this.restaurants.next(resp) ) ;

      }


      public getRestaurant(): Observable<any>{

        return this.restaurants.asObservable();
      }
    }