Snippet

Schreibgeschützte Signal-Views mit Angular's asReadonly() erzwingen

In großen Angular-Anwendungen erlaubt die Weitergabe eines rohen WritableSignal aus einem Service jeder Komponente, .set() oder .update() darauf aufzurufen — das umgeht die vorgesehenen Mutationsmethoden des Stores und macht Zustandsänderungen unnachvollziehbar. asReadonly() liefert ein Signal, das denselben zugrunde liegenden Wert und dieselben Änderungsbenachrichtigungen wie das Original teilt, aber die .set/.update-API auf Typebene entfernt, sodass TypeScript direkte Mutationsversuche bereits beim Kompilieren ablehnt. Dieser Wrapper kostet nichts zur Laufzeit — kein zusätzliches Subscription- oder Speicher-Overhead — und ist damit der idiomatische Weg, Kapselung in signal-basierten Services durchzusetzen, ohne auf RxJS Subjects mit asObservable() zurückzugreifen.

snippet.js

javascript

import { Injectable, signal, computed } from '@angular/core';
 
interface CartItem {
  sku: string;
  qty: number;
}
 
@Injectable({ providedIn: 'root' })
export class CartStore {
  private readonly _items = signal<CartItem[]>([]);
 
  // Public consumers get a WritableSignal-shaped read-only view.
  readonly items = this._items.asReadonly();
 
  readonly total = computed(() =>
    this._items().reduce((sum, i) => sum + i.qty, 0)
  );
 
  addItem(item: CartItem): void {
    this._items.update((list) => [...list, item]);
  }
 
  removeSku(sku: string): void {
    this._items.update((list) => list.filter((i) => i.sku !== sku));
  }
}

angular

Erklärung

private readonly _items = signal<CartItem[]>([]);

Die private, veränderliche Quelle der Wahrheit — nur diese Klasse darf .set() oder .update() darauf aufrufen.

readonly items = this._items.asReadonly();

Stellt eine schreibgeschützte Signal-Referenz bereit; Konsumenten können lesen und reagieren, aber nicht direkt mutieren.

readonly total = computed(() => ...)

Abgeleiteter Zustand wird automatisch neu berechnet, sobald sich _items ändert — synchron ohne manuelle Verdrahtung.

this._items.update((list) => [...list, item]);

Der einzige zulässige Mutationspfad, der Zustandsänderungen zentralisiert und nachvollziehbar hält.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Schreibgeschützte Signal-Views mit Angular's asReadonly() erzwingen

Verwandt