Qual è il modo migliore per me per inviare dati a un componente da un servizio? - javascript, html, angular, service, osservabile

Attualmente nel mio progetto angolare ho un servizioche utilizza le chiamate http per recuperare i dati dal mio codice java. Ogni 10 secondi il servizio chiama il lato Java e riceve nuovi dati da esso. Ora ho un altro componente che ha bisogno dei dati nel mio servizio. Ho bisogno di questo componente per avere un campo chiamato "dati" che viene aggiornato automaticamente quando il servizio ottiene nuove informazioni.

Come posso impostarli in modo che il servizio spinga le nuove informazioni sul mio altro componente? Mi piacerebbe poter utilizzare {{data}} nell'html del mio componente e farlo aggiornare automaticamente senza dover ricaricare la pagina.

Il mio componente ha il servizio "Autowired" ingià. Quindi attualmente posso chiamare "this.data = this.service.getData ()" ma quella chiamata è all'interno del mio metodo ngOnInit, quindi si verifica solo una volta e il campo dati non viene aggiornato quando il campo dati del servizio viene aggiornato .

risposte:

1 per risposta № 1

È possibile creare un servizio di messaggistica che pubblica dati per gli abbonati o implementare questa funzionalità nel servizio originale.

Suggerirei di disporre di un servizio di messaggistica separato e di pubblicare / sottoscrivere componenti o servizi pertinenti.

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);
}

Dovresti iniettare il servizio in questo modo:

constructor(private messagingService: MessagingService ) {}

Pubblica al servizio:

this.messagingService.publishData(sharedValue);

Iscriviti al servizio:

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

DALLA RISPOSTA SOTTO DA: DeborahK (chi è il corso di Pluralsight che tutti dovrebbero vedere)

In realtà, tutto ciò di cui hai bisogno è un getter.

Cambia la tua proprietà "dati" in un getter e questo farà il trucco:

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

Il rilevamento del cambiamento angolare rileverà ogni volta che i dati vengono modificati il servizio che lo farà rivalutare i suoi binding e call questo getter per ri-ottenere i dati.

Non c'è bisogno di un servizio di fantasia o di un soggetto. :-)

---

0 per risposta № 2

In realtà, tutto ciò di cui hai bisogno è un getter.

Cambia la tua proprietà "dati" in un getter e questo farà il trucco:

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

Il rilevamento del cambiamento angolare rileverà ogni volta che i dati vengono modificati nel servizio, il che causerà la rivalutazione dei suoi binding e chiamerà questo getter per recuperare i dati.

Non c'è bisogno di un servizio elegante o Subject. :-)

---