Clash Royale CLAN TAG#URR8PPP

Get updated data from service method Angular

I have this service.

playerhandler.ts

import Observable,of,Subject from 'rxjs';
import PlayerService from "./../../core/services/player.service";
import Injectable from "@angular/core";
import DeezerService from "../services/deezer.service";
import Track from "../models/Track";

@Injectable(
providedIn: "root"
)
export class PlayerHanlder
isPlaying: boolean = false;
index: number;

constructor(
private playerService: PlayerService,
private deezer: DeezerService
)

initTracks(tracks): void
this.playerService.init(tracks);


play()
this.isPlaying = true;
this.playerService.play();


pause()
this.playerService.pause();


stop()
this.playerService.stop();


next()
this.playerService.playNext();


previous()
this.playerService.playPrevious();


playing(playing)
this.isPlaying = playing;


onEnd()
this.playerService.playNext();


start(album)
if (this.isPlaying) this.stop();
this.deezer.getTrackList(album.tracklist)
.subscribe((tracks: Track) =>
this.initTracks(tracks);
this.playerService.index = 0;
this.play();
);


startSelectedTrack(tracks,trackIndex)
if (this.isPlaying) this.stop();

this.initTracks(tracks);
this.playerService.playNew(trackIndex);
this.isPlaying = true;




The initTracks(tracks) method gets a fresh data anytime a user clicks to play an album or clicks to play a particular track. This can be seen in the last two methods. Now, I have a queue component that is supposed to get the tracks data that is passed into the initTracks(tracks) method so that, the current playlist of tracks will be shown in the queue component. This is where I'm having the problem implementing. I have tried to create an observable of the tracks using of(tracks) in the initTracks method. That didn't work out. I've also tried using a Subject so that the tracks can be both subscribe and be subscribed but that also didn't work out. Please, how do I get any fresh data that is sent into the initTracks(tracks) method into the queue component. Thank you.

initTracks(tracks)

queue component

tracks

initTracks(tracks)

queue component

of(tracks)

initTracks

Subject

initTracks(tracks)

If needed, this is the current source code. source code

2 Answers
2

Please use ReplaySubject and inform if helped.
Can you post some example code where you emit data and subscribe?

ReplaySubject

Subject

of

initTracks(tracks)

queue component

er => console.log(er)

If you want to use a Service to share observable data between components, try the following:

Service

The Service used to share the data (e.g. tracks):

tracks

export class PlayerHandler

private _tracks$ = new BehaviorSubject<Track>(initialTracks);

get tracks$
return this._tracks$;


// not necessarily needed as you can just call
// this.playerHandler.tracks$.next(tracks) from a component (see below)
// but your initTracks(tracks) would look like this
newTracks(tracks: Track)
this._tracks$.next(tracks);




Using the data in a component:

export class Queue implements OnInit

// inject the data service as a public member in the constructor
// to be able to access it in the components template
constructor(public playerHandler: PlayerHandler)

// if you want to subscribe in code behind,
// but in most cases you should use async pipe in the template
ngOnInit()
this.playerHandler.tracks$.subscribe(
tracks => doSomething(tracks)
);


// if you want to publish new tracks from the component
addNewTracks(tracks: Track)
this.playerHandler.tracks$.next(tracks);





Subscribing to the data in the components tamplate:

<div *ngIf="(playerHandler.tracks$ | async) as tracks; else noTracks">
<div *ngFor="let track of tracks">
...
</div>
</div>
<ng-template #noTracks>
...
</ng-template>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.