/ / Jaki jest najlepszy sposób przesyłania danych do komponentu z usługi? - javascript, html, angular, service, obserwowalne

Jaki jest najlepszy sposób przesyłania danych do komponentu z usługi? - javascript, html, angular, service, obserwowalne

W moim kanciastym projekcie aktualnie mam usługęużywający wywołań http do pobierania danych z mojego kodu java. Co 10 sekund usługa wywołuje stronę Java i pobiera z niej nowe dane. Mam teraz inny komponent, który potrzebuje danych w mojej usłudze. Potrzebuję tego komponentu, aby posiadał pole o nazwie „dane”, które jest automatycznie aktualizowane, gdy usługa otrzyma nowe informacje.

Jak mogę je skonfigurować, aby usługa przekazywała nowe informacje do mojego innego komponentu? Chciałbym móc używać {{data}} w html mojego komponentu i mieć to automatycznie aktualizowane bez konieczności ponownego ładowania strony.

Mój komponent ma usługę „Autowired”już. Obecnie mogę po prostu wywołać „this.data = this.service.getData ()”, ale to wywołanie jest w mojej metodzie ngOnInit, więc dzieje się to tylko raz, a pole danych nie jest aktualizowane, gdy pole danych usługi jest aktualizowane .

Odpowiedzi:

1 dla odpowiedzi № 1

Możesz utworzyć usługę przesyłania wiadomości, która publikuje dane dla subskrybentów lub implementuje tę funkcję w oryginalnej usłudze.

Proponuję mieć oddzielną usługę przesyłania wiadomości i publikować / subskrybować odpowiednie komponenty lub usługi.

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

Możesz wstrzyknąć usługę w ten sposób:

constructor(private messagingService: MessagingService ) {}

Publikuj w usłudze:

this.messagingService.publishData(sharedValue);

Subskrybuj usługę:

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

OD ODPOWIEDZI PONIŻEJ: DeborahK (którzy „kursują na Pluralsight wszyscy powinni oglądać)

Właściwie wszystko, czego potrzebujesz, to getter.

Zmień własność „danych” na gettera, a to załatwi sprawę:

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

Wykrywanie zmian kątowych wykryje za każdym razem, gdy dane zostaną zmienione usługa, która spowoduje ponowną ocenę powiązań i wywołanie ten getter odzyska dane.

Nie ma potrzeby korzystania z wyszukanej usługi lub przedmiotu. :-)


0 dla odpowiedzi nr 2

Właściwie wszystko, czego potrzebujesz, to getter.

Zmień własność „danych” na gettera, a to załatwi sprawę:

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

Wykrywanie zmian kątowych wykryje za każdym razem, gdy dane zostaną zmienione w usłudze, co spowoduje, że ponownie oceni swoje powiązania i wywoła ten getter, aby ponownie uzyskać dane.

Nie ma potrzeby wymyślnego serwisu lub Subject. :-)