Angular Academy · Lektion

Signal Stores in Services

Anwendungszustand in signalbasierten Services speichern

Signal Stores in Services ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Signale als Zustand

Angular-Signale sind reaktive Werte, die Verbraucher über Änderungen benachrichtigen. Ein Signal enthält einen Wert und führt jede Berechnung oder jedes Template, das es liest, erneut aus.

Wenn Sie Signale in einem @Injectable-Service speichern, können mehrere Komponenten denselben reaktiven Zustand gemeinsam nutzen.

Ein minimaler Signal-Store

Erstellen Sie einen Service und speichern Sie den Zustand in einem signal(). Halten Sie das beschreibbare Signal privat und geben Sie eine schreibgeschützte Ansicht frei.

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

Warum providedIn: root

providedIn: 'root' macht den Service in der gesamten Anwendung zu einem Singleton. Jede Komponente, die ihn injiziert, verwendet exakt dieselbe Signalinstanz, sodass der Zustand synchron bleibt.

Das Signal lesen

Rufen Sie das Signal wie eine Funktion auf, um seinen Wert zu lesen. In einem Template verfolgt Angular diesen Lesezugriff und aktualisiert das DOM automatisch, sobald sich der Wert ändert.

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 schützt den Zustand

asReadonly() gibt ein Signal zurück, das gelesen, aber nicht beschrieben werden kann. Komponenten können darauf nicht versehentlich set() oder update() aufrufen, sodass alle Änderungen über die Methoden des Stores erfolgen.

set vs update

Verwenden Sie set(value), wenn Ihnen der nächste Wert direkt vorliegt. Verwenden Sie update(fn), wenn der nächste Wert vom aktuellen Wert abhängt.

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

Mehrere Signale pro Store

Ein Store kann mehrere Signale enthalten, die verschiedene Teile des Zustands darstellen. Halten Sie jedes beschreibbare Signal privat und geben Sie die entsprechenden schreibgeschützten Gegenstücke frei.

private _items = signal<Item[]>([]);
private _loading = signal(false);

readonly items = this._items.asReadonly();
readonly loading = this._loading.asReadonly();

Methoden kapseln die Logik

Geschäftsregeln gehören in die Methoden des Stores, nicht in Komponenten. Komponenten rufen Methoden auf, die die Absicht erkennen lassen, etwa addToCart(item), und der Store entscheidet, wie sich der Zustand ändert.

addToCart(item: Item) {
  this._items.update(list => [...list, item]);
}
removeFromCart(id: string) {
  this._items.update(list => list.filter(i => i.id !== id));
}

Keine Subscriptions erforderlich

Im Gegensatz zu Services auf Basis von RxJS benötigen Signal-Stores weder subscribe() noch eine manuelle Abmeldung. Wenn Sie ein Signal in einem Template lesen, wird die Reaktivität eingerichtet, und Angular räumt sie auf, sobald die Komponente zerstört wird.

Mit inject() injizieren

Die Funktion inject() funktioniert in Konstruktoren, Feldinitialisierern und Factory-Funktionen. Sie ist die moderne Möglichkeit, die Store-Instanz abzurufen.

export class CartComponent {
  private store = inject(CartStore);
  items = this.store.items; // read-only signal
}

Einen Signal-Store testen

Signal-Stores sind einfache Klassen, daher sind Tests unkompliziert: Erstellen Sie eine Instanz, rufen Sie eine Methode auf und lesen Sie den Signalwert synchron. Eine asynchrone Infrastruktur ist nicht erforderlich.

it('increments', () => {
  const store = new CounterStore();
  store.increment();
  expect(store.count()).toBe(1);
});

Kurze Überprüfung

Testen Sie Ihr Verständnis von Signal-Stores.

Zusammenfassung

Sie haben gelernt, einen Signal-basierten Store zu erstellen: Halten Sie beschreibbare Signale privat, geben Sie Ansichten mit asReadonly() frei, ändern Sie den Zustand innerhalb von Methoden mit set/update und injizieren Sie das Singleton mit inject(). Keine Subscriptions, einfache Tests und gemeinsam genutzter reaktiver Zustand.

Häufig gestellte Fragen

Ist die Lektion „Signal Stores in Services“ kostenlos?

Ja — der vollständige Text von „Signal Stores in Services“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Signal Stores in Services“?

Anwendungszustand in signalbasierten Services speichern Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Signal Stores in Services“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy