javascript / intermediate
Snippet
Vererbung geteilter Eigenschaften über eine abstrakte Basis-Komponentenklasse
Objektorientierte Vererbung in Angular ermöglicht es mehreren Komponenten, gemeinsame Input-Eigenschaften und berechnete Getter von einer abstrakten Basisklasse zu erben. Die Dekoration der abstrakten Klasse mit @Directive() stellt sicher, dass der Angular-Compiler Inputs und Lifecycle-Hooks für abgeleitete Komponenten verarbeitet.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { Directive, Input } from '@angular/core';export interface BaseEntity {id: string;createdAt: Date;}@Directive()export abstract class AbstractCardComponent<T extends BaseEntity> {@Input({ required: true }) data!: T;@Input() isHighlighted = false;get formattedDate(): string {return this.data.createdAt.toLocaleDateString();}}
angular
Erklärung
1
export interface BaseEntity {
Deklariert eine generische Dateneinschränkung, die eine ID und eine Date-Eigenschaft erfordert.
2
@Directive()
Ermöglicht es Angular, Metadaten und Input-Bindungen an abgeleitete Klassen zu vererben, ohne ein Template zu deklarieren.
3
export abstract class AbstractCardComponent<T extends BaseEntity> {
Definiert eine abstrakte Basisklasse, die mit einem generischen Entitätstyp parametrisiert ist.
4
@Input({ required: true }) data!: T;
Erzwingt eine erforderliche Input-Eigenschaft, die dem generischen Typ T entspricht.
5
get formattedDate(): string {
Stellt einen geteilten berechneten Getter zur Formatierung des Erstellungsdatums der Entität bereit.