javascript - Hur man återanvänder tjänsteanrop i Angular 2

Jag har två komponenter som använder samma tjänst. På FirstComponent får jag lite data från en tjänst:

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

Först lade jag till en annan getLiveData() till SecondComponent. Men på så sätt gör jag två REST-samtal varje sekund. Det borde inte vara nödvändigt eftersom jag vill använda samma tjänst.

Så, kan jag återanvända det i SecondComponent utan att göra två anrop varje gång?

Jag försökte lägga till FirstComponent som en tjänst och anropa this.service.data men jag får undefined.

PS. Jag behöver också att värdena uppdateras varje sekund på båda komponenterna.

UPPDATERING: Jag har publicerat en Plunker enligt Madhus råd. Jag lyckades få endast ett anrop åt gången, men jag får inga data från det.

Svar #1

Du kan försöka flytta intervallet till tjänsten.

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

Och på komponenten:

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

Svar #2

Du kan prova nedan,

@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$;
  }
}

Här är Plunker!! I Plunk har jag simulerat tjänstdata med en enkel karta som ger data med ett intervall.

Uppdatering

Plunker med att konsumera API med Http.

Hoppas det här hjälper!!

Relaterade artiklar