javascript / intermediate
Snippet
Gemeinsame Komponentenlogik mit abstrakten Basisklassen vererben
Abstrakte Klassen in Angular ermöglichen es Komponenten, gemeinsame Zustände, injizierte Abhängigkeiten und Hilfsmethoden zu erben. Die @Directive()-Dekoration an der abstrakten Basisklasse ist erforderlich, damit der Angular-Compiler die Dependency Injection in Unterklassen korrekt verarbeitet.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
import { Directive, inject, DestroyRef } from '@angular/core';@Directive()export abstract class BaseCardWidget {protected destroyRef = inject(DestroyRef);abstract widgetTitle: string;protected logAction(action: string): void {console.log(`[${this.widgetTitle}] Executing: ${action}`);}}
angular
Erklärung
1
export abstract class BaseCardWidget {
Definiert eine abstrakte Basisklasse, die nicht direkt instanziiert werden kann und als Vorlage für konkrete Komponenten dient.
2
abstract widgetTitle: string;
Zwingt alle erbenden Kindkomponenten dazu, ihre eigene spezifische Titel-Eigenschaft zu implementieren.
3
protected logAction(action: string): void {
Kapselt eine wiederverwendbare Hilfsmethode, auf die nur diese Klasse und abgeleitete Unterklassen zugreifen können.