Angular Academy · Lekcja

Łączenie Signals i RxJS

Łączyć signals i observables za pomocą interop

Lekcja 4 z 413 kroki

Łączenie Signals i RxJS to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Dwa światy reaktywności

Aplikacje Angular łączą signals (synchroniczne, oparte na odczytywaniu) oraz RxJS Observables (asynchroniczne strumienie oparte na wypychaniu danych). Pakiet @angular/core/rxjs-interop łączy je za pomocą toSignal i toObservable.

Podstawy toSignal

toSignal() subskrybuje Observable i udostępnia jego najnowszą wartość jako sygnał tylko do odczytu. Subskrypcja jest automatycznie anulowana po zniszczeniu kontekstu wstrzykiwania.

import { toSignal } from '@angular/core/rxjs-interop';

clock = toSignal(interval(1000), { initialValue: 0 });
// read in template: {{ clock() }}

initialValue i odczyty synchroniczne

Observable może nie emitować synchronicznie, dlatego sygnał potrzebuje wartości początkowej. Należy podać initialValue albo użyć requireSync: true, gdy źródło gwarantuje natychmiastową emisję, jak w przypadku BehaviorSubject.

value = toSignal(this.behaviorSubject$, { requireSync: true });

Zastępowanie potoku async

toSignal często zastępuje potok async. Zamiast data$ | async odczytują Państwo bezpośrednio data(), co dobrze współpracuje z computed().

private http = inject(HttpClient);
users = toSignal(this.http.get<User[]>('/api/users'), { initialValue: [] });
count = computed(() => this.users().length);

Podstawy toObservable

toObservable() przekształca sygnał w Observable, który emituje za każdym razem, gdy sygnał się zmieni. Jest to przydatne, gdy potrzebują Państwo operatorów RxJS, takich jak debounceTime lub switchMap.

import { toObservable } from '@angular/core/rxjs-interop';

query = signal('');
query$ = toObservable(this.query);

Potok wyszukiwania z opóźnieniem

Można połączyć oba kierunki: sygnał zasila toObservable, RxJS opóźnia wyszukiwanie i przełącza się na wywołanie HTTP, a toSignal przekształca wyniki z powrotem w sygnał.

query = signal('');
results = toSignal(
  toObservable(this.query).pipe(
    debounceTime(300),
    distinctUntilChanged(),
    switchMap(q => this.api.search(q))
  ), { initialValue: [] }
);

Kontekst wstrzykiwania

Oba narzędzia wymagają kontekstu wstrzykiwania, ponieważ zarządzają subskrypcjami powiązanymi z cyklem życia. Należy wywoływać je jako inicjalizatory pól albo przekazać jawny injector, jeśli są wywoływane później.

constructor() {
  this.data = toSignal(this.source$); // ok: in constructor
}

Obsługa błędów

Jeśli źródłowy Observable zgłosi błąd, toSignal ponownie go zgłosi podczas odczytu. Błędy należy obsługiwać wewnątrz potoku za pomocą catchError, aby sygnał zachował użyteczną wartość.

results = toSignal(
  toObservable(this.query).pipe(
    switchMap(q => this.api.search(q).pipe(catchError(() => of([]))))
  ), { initialValue: [] }
);

Harmonogram toObservable

toObservable korzysta wewnętrznie z efektu, dlatego emisje są dostarczane w następnym mikrozadaniu, a nie synchronicznie. Szybkie zmiany sygnału są łączone do jego najnowszej wartości.

Kiedy użyć którego narzędzia

Po toObservable należy sięgać, gdy potrzebne są operatory zależne od czasu lub operatory wyższego rzędu. toSignal warto stosować do używania dowolnego strumienia w szablonach i obliczanych modelach odczytu bez ręcznego zarządzania subskrypcją.

Automatyczne czyszczenie

Oba narzędzia wiążą swoją subskrypcję z cyklem życia kontekstu wstrzykiwania. Po zniszczeniu komponentu lub usługi subskrypcja jest usuwana, co zapobiega wyciekom bez ręcznego wywoływania unsubscribe().

Szybki test

Sprawdź swoją wiedzę o interoperacyjności.

Odpowiedz w interaktywnej lekcji

Podsumowanie

Połączyli Państwo sygnały z RxJS: toSignal używa strumieni jako sygnałów tylko do odczytu (z initialValue/requireSync), a toObservable udostępnia sygnały jako strumienie dla operatorów RxJS. Subskrypcje są automatycznie czyszczone za pośrednictwem kontekstu wstrzykiwania.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 38
Lekcje: 144

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Łączenie Signals i RxJS” jest bezpłatna?

Tak — pełny tekst „Łączenie Signals i RxJS” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Łączenie Signals i RxJS”?

Łączyć signals i observables za pomocą interop Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Łączenie Signals i RxJS”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Angular Academy