Question

我有两个使用相同服务的组件。在FirstComponent上，我从服务中获取了一些数据：

getLiveData() {
  Observable.interval(1000)
    .mergeMap(() => this.service.getData())
    .subscribe(
      res => this.data = res,
      err => this.error = err
    );
}

首先，我已向getLiveData()添加了另一个SecondComponent。但是，这样我每秒都会进行两次REST调用。因为我想使用相同的服务，所以不应该这样做。

那么，我可以在SecondComponent中重复使用它而不必每次都进行两次调用吗？

我尝试将FirstComponent添加为服务并调用this.service.data，但我收到undefined。

PS。我还需要在两个组件上每秒更新一次值。

更新： 我已根据Madhu的建议发布了Plunker。我设法每次只能拨打一个电话，但我没有从中获取任何数据。

Answer 1

您可以尝试将时间间隔移至服务中。

observableSub;
getDataObservable() {
    if (!this.observableSub) {
        this.observableSub = Observable.interval(1000)
            .mergeMap(() => this.getData())
    } 
    return this.observableSub;
}

关于组件：

getLiveData() {
  this.getDataObservable().subscribe(
      res => this.data = res,
      err => this.error = err
    );
}

Answer 2

您可以尝试以下，

@Injectable()
export class MyAwesomeService{
  _streamingData: Subject<any> = new Subject<any>();
  streamingObservable = {};

  get streamingData$(){
    return this._streamingData.asObservable();
  }      

  getLiveData(){
    if(!!this.streamingObservable){
    const start = 10;
    this.streamingObservable =  Observable
         .interval(1000)
         .mergeMap(() => this.service.getData())
         .subscribe(
            res => {
              this._streamingData.next(res);
            },
            err => {
              console.log(err);
            }
         );
    }
    return this.streamingObservable;
  }
}

@Component({
  selector: 'my-app',
  template: `<h3>Live streaming data</h3>
   <hr />
   <child-comp-1></child-comp-1>
   <hr />
   <child-comp-2></child-comp-2>
  `
})
export class AppComponent { }

@Component({
  selector: 'child-comp-1',
  template: `<h3>Child component</h3>
   Streaming Data: {{ data | async }}
  `
})
export class ChildComponent1 {
  data = "Hello!!";
  constructor(private myservice:MyAwesomeService){
    this.data= myservice.streamingData$;
    myservice.getLiveData();
  }
}

@Component({
  selector: 'child-comp-2',
  template: `<h3>Child component 2</h3>
   Streaming Data: {{ data | async }}
  `
})
export class ChildComponent2 {
  data = "Hello!!";
  constructor(private myservice:MyAwesomeService){
    this.data= myservice.streamingData$;
  }
}

以下是Plunker!!，In Plunk我使用简单的地图模拟服务数据，该地图以一定间隔提供数据。

<强>更新

Plunker 使用Http消费API。

希望这会有所帮助!!

如何在Angular 2中重用服务调用

2 个答案: