Sharing Data Across Services in Angular 2

Question

I've looked around a bit but there seems to be no material on sharing data between services in Angular2. I have two @Injectable() services, where one is a Singleton that broadcasts data. In the other service, I have code that updates a variable called progress as a web audio track plays:

import { SharedService } from '../shared.service';
...
@Injectable()
export class WebAudioTrack implements IAudioTrack {
 public _progress: number = 0;
 ...
 constructor(public src: string, @Optional() public preload: string = 'none', @Optional() private ctx: AudioContext = undefined ) {
 // audio context not needed for now
 // this.ctx = this.ctx || new AudioContext();
 this.createAudio(); 
 }
 private onTimeUpdate(e: Event) {
 if (this.isPlaying && this.audio.currentTime > 0) {
 # I want to do something like SharedService.setProgress(this.audio.currentTime) here
 this._progress = this.audio.currentTime;
 this._completed = this.audio.duration > 0 ? Math.trunc (this.audio.currentTime / this.audio.duration * 100)/100 : 0;
 } 
 }

I'm looking for a way to broadcast the _progress variable in the code above to another @Injectable called SharedService. I don't even need to set up a BehaviorSubject in the code above because I should just be able to do something like SharedService.setProgress(time) every time the onTimeUpdate fires.

The question is, how can I add the SharedService to the code above? When I try to add it to the constructor it complains because there are calls to "new WebTrackAudio(variable, variable)". Here's the other service code which is incomplete and might be slightly confusing:

@Injectable()
export class SharedService {
 progress: number;
 setProgress(progress: number) {
 console.log(progress);
 this.progress = progress;
 }
 getProgress() {
 return this._webTrack._progress;
 }
}

Thanks!

When I update the constructor in the first service to include SharedService like so:

 constructor(public src: string, @Optional() public preload: string = 'none', @Optional() private ctx: AudioContext = undefined, public sharedService: SharedService ) {
 // audio context not needed for now
 // this.ctx = this.ctx || new AudioContext();
 this.createAudio(); 
 }

I get the following error:

Typescript Error

Supplied parameters do not match any signature of call target.

.../src/app/ionic-audio/ionic-audio-providers.ts

create(track: ITrackConstraint) {

let audioTrack = new WebAudioTrack(track.src, track.preload);

Object.assign(audioTrack, track);

• Günter Zöchbauer: I'm sure to get to the core of the problem you could remove 2/3 of the code. I find it quite confusing what the problem actually is from all the noise. To share data between services you can just inject a service into another as long as you don't cause circular dependencies.
• Günter Zöchbauer: What do you mean with "adding to the constructor"? Why would you need a call to new WebTrackAudio(variable, variable) if it is a service?
• HeyMegabyte: I actually removed about 90% of the code already (you can see the ...s). I guess it's not a service? What is it then? I'm still getting my feet wet with angular2
• HeyMegabyte: It's not a Singleton service but I think it's still a service... correct me if I'm wrong though
• Günter Zöchbauer: Adding service to what? Perhaps you mean injecting the service to the class that contains the code new WebAudioTrack(track.src, track.preload); and then pass the service like new WebAudioTrack(track.src, track.preload, sharedService);. There is no way to automagically get a service passed to a class instance you create with new.

Answer 1

import { SharedService } from '../shared.service';
...
@Injectable()
export class WebAudioTrack implements IAudioTrack {
 public _progress: number = 0;
 ...
 constructor(private sharedService:SharedService) {}
 private onTimeUpdate(e: Event) {
 if (this.isPlaying && this.audio.currentTime > 0) {
 # I want to do something like this.sharedService.setProgress(this.audio.currentTime) here
 this._progress = this.audio.currentTime;
 this._completed = this.audio.duration > 0 ? Math.trunc (this.audio.currentTime / this.audio.duration * 100)/100 : 0;
 } 
 }

ensure both services are provided like

@NgModule({
 ...,
 providers: [WebAudioTrack, SharedService],
})
export class AppModule {}

• HeyMegabyte: This technique is leading me to get the following TS error: Supplied parameters do not match any signature of call target. Edited the post to reflect the details
• Aluan Haddad: @user2476265 you can't declare required arguments after optional ones.
• Günter Zöchbauer: Optional parameters like these don't make sense in services at all. It would be necessary to clarify how the class is actually used.