对我来说，从服务将数据推送到组件的最佳方法是什么？

Question

In my angular project I currently have a service that uses http calls to retrieve data from my java code. Every 10 seconds the service calls the Java side and gets new data from it. I now have another component that needs the data in my service. I need this component to have a field called 'data' that just gets updated automatically when the service gets new information.

How can I set them up so that the service pushes the new information to my other component ? I would like to be able to use {{data}} in my component's html and have that be automatically updated without having to reload the page.

My component does have the service 'Autowired' in already. So currently I can just call 'this.data = this.service.getData()' but that call is within my ngOnInit method so it only happens once, and the data field does not get updated when the service's data field gets updated.

Answer 1

You can create a messaging service that publishes data for subscribers or implement this functionality in your original service.

I would suggest having a separate messaging service and have relevant components or services publish/subscribe to it.

messaging.service.ts

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';


@Injectable()
export class MessagingService {
  private sharedValue = new Subject<string>();  

  // Observable string streams
  sharedValue$ = this.sharedValue.asObservable();

    // Service message commands
  publishData(data: string) {
    this.sharedValue.next(data);
  }

You would inject the service like this:

constructor(private messagingService: MessagingService ) {}

Publish to the service:

this.messagingService.publishData(sharedValue);

Subscribe to the service:

this.messagingService.sharedValue$.subscribe(
            data => {                    
                this.localSharedValue = data;
            });

FROM ANSWER BELOW BY: DeborahK (who's courses on Pluralsight everyone should watch)

Actually, all you need is a getter.

Change your 'data' property to a getter and that will do the trick:

 get data(): any { return this.service.getData(); } 

Angular change detection will detect any time that data is changed in the service which will cause it to re-evaluate its bindings and call this getter to re-get the data.

No need for a fancy service or Subject. :-)

Answer 2

Actually, all you need is a getter.

Change your 'data' property to a getter and that will do the trick:

get data(): any {
    return this.service.getData();
}

Angular change detection will detect any time that data is changed in the service which will cause it to re-evaluate its bindings and call this getter to re-get the data.

No need for a fancy service or Subject . :-)