trjhtr

I have a component and a service. The service is contacting an API and gets a data which should be handled in the component. Now, I can do it in two ways:

1. Create a public Observable in my service and the component is subscribed to it and handle changes


2. All methods in my service return Observables and the component subscribes to every call and then handles the changes.

Let me show a minimal example.

So this is the first solution:

my-service.service.ts

@Injectable()
export class MyService 

 requestObservable: Observable<any>;
 private requestObserver: Observer<any>;

 constructor(private http: Http) 

 this.requestObservable = new Observable<any>(observer => 
 this.requestObserver = observer;
 );

 

 get(id: string): void 
 this.http
 .get(`/some/url/$id`)
 .map(response => response.json())
 .subscribe(
 next => this.requestObserver.next(next)
 );
 

my-component.component.ts

@Component(...)
export class MyComponent implements OnInit 

 constructor(private myService: MyService) 

 this.myService.requestObservable.subscribe(
 next => this.handleChanges(next)
 );

 

 ngOnInit(): void 

 this.myService.get(1);
 this.myService.get(2);

 

 handleChanges(changes: any): void 

 console.log(changes);

 

And this is the same situation but solved in the second way:

my-service.service.ts

@Injectable()
export class MyService 

 constructor(private http: Http) 

 get(id: string): Observable<any> 
 return this.http
 .get(`/some/url/$id`)
 .map(response => response.json());
 

my-component.component.ts

@Component(...)
export class MyComponent implements OnInit 

 constructor(private myService: MyService) 

 ngOnInit(): void 

 this.myService.get(1).subscribe(
 next => 
 console.log(next);
 
 );

 this.myService.get(2).subscribe(
 next => 
 console.log(next);
 
 );

 

So as you can see both examples are doing the same thing but in other ways. I have omitted unnecessary imports and other things because they are not connected with my problem.

I would say that the first solution is much cleaner since it gives me a possibility to have multiple calls to the same get() method and have one method which handles all of them.

On the other hand, if I had more different methods in my service and every one of them would have to use different Observable then it would make my service more complicated and low-readable.

Please advice which solution is better?