Angular Academy · Lektion

Forbindelse af signals og RxJS

Forbind signals og observables med interop.

Lektion 4 af 413 trin

Forbindelse af signals og RxJS er en gratis Angular Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Angular Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Angular Academy-kurset indeholder 4 lektioner i alt.

To reaktive verdener

Angular-apps kombinerer signaler (synkrone, pull-baserede) og RxJS Observables (asynkrone, push-baserede strømme). Pakken @angular/core/rxjs-interop forbinder dem med toSignal og toObservable.

Grundlæggende om toSignal

toSignal() abonnerer på en Observable og eksponerer dens seneste værdi som et skrivebeskyttet signal. Den afmelder automatisk abonnementet, når injektionskonteksten destrueres.

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

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

initialValue og synkrone læsninger

Observables udsender måske ikke synkront, så et signal har brug for en startværdi. Angiv initialValue, eller brug requireSync: true, når kilden garanteret udsender med det samme (som en BehaviorSubject).

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

Erstatning af async-pipen

toSignal erstatter ofte async-pipen. I stedet for data$ | async læser du data() direkte, hvilket fungerer problemfrit sammen med computed().

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

Grundlæggende om toObservable

toObservable() omdanner et signal til en Observable, der udsender, hver gang signalet ændres. Det er nyttigt, når du har brug for RxJS-operatorer som debounceTime eller switchMap.

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

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

Pipeline til forsinket søgning

Kombiner begge retninger: Et signal føder toObservable, RxJS forsinker søgningen og skifter til et HTTP-kald, og toSignal omdanner resultaterne tilbage til et signal.

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

Injektionskontekst

Begge hjælpefunktioner har brug for en injektionskontekst (de håndterer abonnementer, der er knyttet til en livscyklus). Kald dem som feltinitialiseringer, eller angiv en eksplicit injector, hvis du kalder dem senere.

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

Fejlhåndtering

Hvis kilde-Observable'en giver en fejl, kaster toSignal fejlen igen ved læsning. Håndter fejl inde i pipelinen med catchError, så signalet bevarer en brugbar værdi.

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

Tidspunkt for toObservable

toObservable bruger en effekt internt, så udsendelser leveres i den næste mikrotask og ikke synkront. Hurtige signalændringer samles til den seneste værdi.

Hvornår skal du bruge hvad

Brug toObservable, når du har brug for tidsbaserede operatorer eller operatorer på højere niveau. Brug toSignal til at forbruge enhver strøm i skabeloner og beregnede læsemodeller uden manuelt abonnement.

Oprydning sker automatisk

Begge hjælpefunktioner knytter deres abonnement til injektionskontekstets livscyklus. Når komponenten eller tjenesten destrueres, afvikles abonnementet, så lækager undgås uden manuel unsubscribe().

Hurtigt tjek

Test din viden om interoperabilitet.

Besvar den i den interaktive lektion

Opsummering

Du har forbundet signaler og RxJS: toSignal forbruger strømme som skrivebeskyttede signaler (med initialValue/requireSync), og toObservable eksponerer signaler som strømme til RxJS-operatorer. Abonnementer ryddes automatisk op via injektionskonteksten.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 38
Lektioner: 144

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Forbindelse af signals og RxJS” gratis?

Ja — alle 3 lektioner i læringssporet Angular Academy, inklusive “Forbindelse af signals og RxJS”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Angular Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Forbindelse af signals og RxJS”?

Forbind signals og observables med interop. Du øver dig i Angular Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Angular Academy?

Der kræves ingen tidligere erfaring. Angular Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Forbindelse af signals og RxJS”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Angular Academy-lektion?

Ja. Alle Angular Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Angular Academy