Signal-lagre i tjenester
Lagre apptilstand i signalbaserte tjenester.
Signal-lagre i tjenester er en gratis leksjon i Angular Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Angular Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Angular Academy inneholder totalt 4 leksjoner.
Signals som tilstand
Angular-signals er reaktive verdier som varsler forbrukere når de endres. Et signal inneholder en verdi og kjører beregninger eller maler som leser det, på nytt.
Hvis De lagrer signals i en @Injectable-tjeneste, kan flere komponenter dele den samme reaktive tilstanden.
Et minimalt signal-lager
Opprett en tjeneste og lagre tilstanden i en signal(). Hold det skrivbare signalet privat, og eksponer 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' gjør tjenesten til en singleton i hele appen. Alle komponenter som injiserer den, deler nøyaktig samme signalinstans, slik at tilstanden holdes synkronisert.
Lese signalet
Kall signalet som en funksjon for å lese verdien. I en mal sporer Angular lesingen og oppdaterer DOM-en automatisk når verdien endres.
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 som kan leses, men ikke skrives til. Komponenter kan ikke utilsiktet kalle set() eller update() på det, slik at alle endringer går gjennom metodene i lageret.
set kontra update
Bruk set(value) når De har den neste verdien direkte. Bruk update(fn) når den neste verdien avhenger av den nåværende.
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 signals per lager
Et lager kan inneholde flere signals som representerer ulike deler av tilstanden. Hold hvert skrivbare signal privat, og eksponer tilsvarende skrivebeskyttede visninger.
private _items = signal<Item[]>([]);
private _loading = signal(false);
readonly items = this._items.asReadonly();
readonly loading = this._loading.asReadonly();Metoder kapsler inn logikk
Forretningsreglene hører hjemme i metodene i lageret, ikke i komponentene. Komponentene kaller metoder som uttrykker hensikten, for eksempel addToCart(item), og lageret avgjør hvordan tilstanden endres.
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ødvendig
I motsetning til RxJS-baserte tjenester trenger signallagre verken subscribe() eller manuell avslutning av abonnementer. Når De leser et signal i en mal, kobles reaktiviteten opp, og Angular rydder den opp når komponenten ødelegges.
Injisere med inject()
Funksjonen inject() fungerer i konstruktører, feltinitialiseringer og fabrikkfunksjoner. Den er den moderne måten å hente instansen av lageret på.
export class CartComponent {
private store = inject(CartStore);
items = this.store.items; // read-only signal
}Teste et signallager
Signallagre er vanlige klasser, så testene blir enkle: Opprett en instans, kall en metode og les signalverdien synkront. Det kreves ingen asynkron håndtering.
it('increments', () => {
const store = new CounterStore();
store.increment();
expect(store.count()).toBe(1);
});Kort kontroll
Test forståelsen Deres av signallagre.
Oppsummering
De har lært å bygge et signalbasert lager: holde skrivbare signals private, eksponere visninger med asReadonly(), endre tilstanden via set/update i metoder og injisere singletonen med inject(). Ingen abonnementer, enkel testing og delt reaktiv tilstand.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 38
- Leksjoner
- 144
Ofte stilte spørsmål
Er leksjonen «Signal-lagre i tjenester» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Angular Academy, inkludert «Signal-lagre i tjenester», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Angular Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Signal-lagre i tjenester»?
Lagre apptilstand i signalbaserte tjenester. Du øver på Angular Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Angular Academy?
Ingen tidligere erfaring er nødvendig. Angular Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «Signal-lagre i tjenester»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Angular Academy-leksjonen?
Ja. Alle Angular Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Signal-lagre i tjenester
- Derivere tilstand med computed
- Uforanderlig oppdatering av tilstand
- Koble sammen Signals og RxJS