Signalstores i services
Opbevar applikationstilstand i signalbaserede services.
Signalstores i services er en gratis Angular Academy-lektion på CoddyKit. Dette er lektion 1 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.
Signaler som tilstand
Angular-signaler er reaktive værdier, der underretter forbrugere, når de ændres. Et signal indeholder en værdi og kører enhver beregning eller skabelon, der læser det, igen.
Hvis du gemmer signaler i en @Injectable-tjeneste, kan flere komponenter dele den samme reaktive tilstand.
Et minimalt signalager
Opret en tjeneste, og gem tilstanden i et signal(). Hold det skrivbare signal privat, og eksponér en skrivebeskyttet visning.
import { Injectable, signal } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class CounterStore {
private _count = signal(0);
readonly count = this._count.asReadonly();
increment() { this._count.update(c => c + 1); }
}Hvorfor providedIn root
providedIn: 'root' gør tjenesten til en singleton i hele appen. Alle komponenter, der injicerer den, deler præcis den samme signalinstans, så tilstanden forbliver synkroniseret.
Læsning af signalet
Kald signalet som en funktion for at læse dets værdi. I en skabelon registrerer Angular læsningen og opdaterer automatisk DOM'en, når værdien ændres.
import { Component, inject } from '@angular/core';
import { CounterStore } from './counter.store';
@Component({
selector: 'app-counter',
template: '<button (click)="store.increment()">{{ store.count() }}</button>'
})
export class CounterComponent {
store = inject(CounterStore);
}asReadonly beskytter tilstanden
asReadonly() returnerer et signal, der kan læses, men ikke skrives til. Komponenter kan ikke ved en fejl kalde set() eller update() på det, så alle ændringer går gennem lagerets metoder.
set over for update
Brug set(value), når du har den næste værdi direkte. Brug update(fn), når den næste værdi afhænger af den aktuelle.
private _user = signal<User | null>(null);
setUser(u: User) { this._user.set(u); }
clearUser() { this._user.set(null); }
touch() { this._user.update(u => u ? { ...u, seen: true } : u); }Flere signaler pr. lager
Et lager kan indeholde flere signaler, der repræsenterer forskellige dele af tilstanden. Hold hvert skrivbare signal privat, og eksponér skrivebeskyttede modstykker.
private _items = signal<Item[]>([]);
private _loading = signal(false);
readonly items = this._items.asReadonly();
readonly loading = this._loading.asReadonly();Metoder indkapsler logik
Forretningsregler hører hjemme i lagerets metoder, ikke i komponenterne. Komponenter kalder metoder, der tydeliggør hensigten, som addToCart(item), og lageret afgør, hvordan tilstanden ændres.
addToCart(item: Item) {
this._items.update(list => [...list, item]);
}
removeFromCart(id: string) {
this._items.update(list => list.filter(i => i.id !== id));
}Ingen abonnementer nødvendige
I modsætning til tjenester baseret på RxJS kræver signallagre hverken subscribe() eller manuel afmelding. Når du læser et signal i en skabelon, oprettes reaktiviteten, og Angular rydder automatisk op, når komponenten destrueres.
Injektion med inject()
Funktionen inject() fungerer i konstruktører, feltinitialiseringer og fabriksfunktioner. Det er den moderne måde at hente lagerinstansen på.
export class CartComponent {
private store = inject(CartStore);
items = this.store.items; // read-only signal
}Test af et signallager
Signallagre er almindelige klasser, så tests er enkle: Opret en instans, kald en metode, og læs signalværdien synkront. Der kræves ingen asynkron infrastruktur.
it('increments', () => {
const store = new CounterStore();
store.increment();
expect(store.count()).toBe(1);
});Hurtigt tjek
Test din forståelse af signallagre.
Opsummering
Du har lært at opbygge et signalbaseret lager: holde skrivbare signaler private, eksponere visninger via asReadonly(), ændre tilstanden med set/update i metoder og injicere singletonen med inject(). Ingen abonnementer, nem testning og delt reaktiv tilstand.
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
Ofte stillede spørgsmål
Er lektionen “Signalstores i services” gratis?
Ja — alle 3 lektioner i læringssporet Angular Academy, inklusive “Signalstores i services”, 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 “Signalstores i services”?
Opbevar applikationstilstand i signalbaserede services. 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 1 af 4.
Hvor lang tid tager lektionen “Signalstores i services”?
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
- Signalstores i services
- Afledning af tilstand med computed
- Uforanderlig opdatering af tilstand
- Forbindelse af signals og RxJS