javascript / intermediate
Snippet
Zustandsbehaftete unveränderliche Array-Operationen in signalbasierten Services
Die Kombination von objektorientierter Vererbung mit Angular Signals schafft strukturierte Zustandscontainer für die Array-Verwaltung. Moderne, nicht-mutierende ECMAScript-Array-Methoden wie toSorted und toSpliced erzeugen neue, unveränderliche Array-Instanzen in den Signal-Update-Callbacks, was Mutationsfehler verhindert und reaktive Consumer sauber benachrichtigt.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { Injectable, signal, computed } from '@angular/core';export interface TaskRecord {readonly id: string;readonly priority: number;readonly title: string;}export abstract class BaseCollectionModel<T extends { id: string }> {protected readonly itemsSignal = signal<readonly T[]>([]);readonly items = this.itemsSignal.asReadonly();readonly count = computed(() => this.itemsSignal().length);abstract sortEntries(): void;}@Injectable({ providedIn: 'root' })export class TaskManagerService extends BaseCollectionModel<TaskRecord> {sortEntries(): void {this.itemsSignal.update(current =>current.toSorted((a, b) => b.priority - a.priority));}removeTaskById(targetId: string): void {this.itemsSignal.update(current => {const index = current.findIndex(task => task.id === targetId);return index !== -1 ? current.toSpliced(index, 1) : current;});}}
angular
Erklärung
1
export abstract class BaseCollectionModel<T extends { id: string }> {
Deklariert eine abstrakte generische Basisklasse, die eine objektorientierte Struktur und Typbeschränkungen vorgibt.
2
current.toSorted((a, b) => b.priority - a.priority)
Verwendet die unveränderliche toSorted()-Methode, um eine sortierte Kopie zu erstellen, ohne den Zustand zu mutieren.
3
return index !== -1 ? current.toSpliced(index, 1) : current;
Nutzt toSpliced(), um ein neues Array ohne das Zielelement zurückzugeben, wodurch die ursprüngliche Referenz unberührt bleibt.