组件间共享数据服务

Question

我是 Angular 的新人，遇到了问题。我有两个组件 A 和 B。以及 SharedDataService。在组件 A 中，我从 REST 服务获取数据并与组件 B 共享此数据，我想使用 SharedDataService。

组件 A：

let data: Data;
this.restService.getData().subscribe(data => 
          {
            this.sharedService.addSharedData(data);
          } , error => console.error(error));

组件 B：

let sharedData: Data;
     this.SharedService.getSharedData()
     .subscribe(ds => sharedData = ds);

和共享服务：

public sharedData: Data;

  constructor() { }

  addSharedData(data : Data) {
    this.sharedData = data;
  }

  getSharedData() : Observable<Data> {
    return of (this.sharedData);
  }

在调试过程中，我发现组件 B 尝试获取数据的次数比组件 A 放在那里的时间早几次。怎么运行的？我认为订阅总是在数据发生变化时获取数据。但是为什么现在不行了？

P.S。共享数据效果很好。例如，如果我把 this.sharedService.addSharedData(fakedata);在组件 A 中订阅 restService 之前

Answer 1

修改您的 SharedService 以利用 BehaviorSubject 和反应式编程的力量。

  private sharedData: BehaviorSubject<Data> = new BehaviorSubject<Data>(null);

  addSharedData(data: Data) {
    this.sharedData.next(data);
  }

  getSharedData(): Observable<Data> {
    return this.sharedData.asObservable();
  }

这样 SharedService 将无缝跟踪您的数据，并在新值到达时通知所有 getSharedData() 订阅 addSharedData(data: Data)

也可以通过使用 BehaviorSubject 而不是 Subject 任何新的订阅将接收到上一个以前的数据。但请注意，在使用 addSharedData 方法到达某些数据之前，getSharedData 将提供空值。

组件间共享数据服务

Sharing data service between components

angular-services

angular