So arbeiten Sie mit TypeScript-Dekoratoren in Angular

TypeScript-Dekoratoren sind eine spezielle Art von Deklaration, die an eine Klasse, Methode, einen Accessor, eine Eigenschaft oder einen Parameter angehängt werden kann. In Angular bieten Dekoratoren eine Möglichkeit, Klassen Metadaten hinzuzufügen, was sie sehr leistungsfähig für die Erstellung wiederverwendbarer Komponenten, Dienste und mehr macht. In diesem Handbuch wird die Arbeit mit TypeScript-Dekoratoren in Angular erläutert und anhand von Beispielen wird ihre Verwendung besser verständlich.

Was sind TypeScript-Dekoratoren?

Dekoratoren sind Funktionen, die das Verhalten einer Klasse oder eines Klassenmitglieds ändern. In Angular werden Dekoratoren verwendet, um Komponenten, Anweisungen, Pipes und injizierbare Dienste zu definieren. Sie bieten eine deklarative Möglichkeit, Metadaten auf eine Klasse anzuwenden, die Angular für verschiedene Zwecke verwendet, z. B. zum Erstellen von Instanzen von Komponenten oder zum Einfügen von Abhängigkeiten.

Gängige Angular-Dekoratoren

Angular verfügt über mehrere integrierte Dekoratoren, die für unterschiedliche Zwecke verwendet werden. Nachfolgend sind die gängigsten Angular-Dekoratoren aufgeführt:

• @Component – Definiert eine Angular-Komponente.
• @Directive – Definiert eine Angular-Direktive.
• @Pipe – Definiert eine Angular-Pipe.
• @Injectable – Definiert einen Dienst, der in andere Komponenten oder Dienste eingefügt werden kann.
• @Input – Dekoriert eine Eigenschaft, um sie zu einer datenbindenden Eingabe zu machen.
• @Output – Dekoriert eine Eigenschaft, um sie zu einer ereignisbindenden Ausgabe zu machen.

Verwenden von @Component Decorator

Der Dekorator @Component wird zum Definieren einer Angular-Komponente verwendet. Er stellt Metadaten zur Komponente bereit, wie etwa deren Selektor, Vorlage, Stile und andere Konfigurationen.

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  template: `<h1>Hello, World!</h1>`,
  styles: ['h1 { color: blue; }']
})
export class HelloWorldComponent { }

In diesem Beispiel definiert der Dekorator @Component eine einfache Komponente mit einer Vorlage, die „Hallo Welt!“ anzeigt. Der Selektor gibt das benutzerdefinierte HTML-Tag an, das für diese Komponente verwendet werden soll.

Verwenden von @Injectable Decorator

Der Dekorator @Injectable wird verwendet, um eine Serviceklasse zu definieren, die in andere Komponenten oder Services eingefügt werden kann. Er ist ein wesentlicher Bestandteil des Abhängigkeitseinspritzsystems von Angular.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData() {
    return ['Angular', 'TypeScript', 'Decorators'];
  }
}

Hier macht der Dekorator @Injectable den DataService für die Abhängigkeitsinjektion in der gesamten Anwendung verfügbar.

Verwenden von @Input- und @Output-Dekoratoren

Die Dekoratoren @Input und @Output werden verwendet, um Eingabeeigenschaften und Ausgabeereignisse in Angular-Komponenten zu erstellen. Sie werden häufig für die Komponentenkommunikation verwendet.

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <p>{{ message }}</p>
    <button (click)="sendMessage()">Send Message</button>
  `
})
export class ChildComponent {
  @Input() message: string;
  @Output() messageEvent = new EventEmitter();

  sendMessage() {
    this.messageEvent.emit('Hello from Child Component!');
  }
}

In diesem Beispiel wird der Dekorator @Input verwendet, um Daten von einer übergeordneten Komponente an eine untergeordnete Komponente zu übergeben. Der Dekorator @Output wird verwendet, um Daten über ein Ereignis von der untergeordneten Komponente zurück an die übergeordnete Komponente zu senden.

Erstellen benutzerdefinierter Dekoratoren

In Angular können benutzerdefinierte Dekoratoren erstellt werden, um Klassen, Methoden oder Eigenschaften bestimmtes Verhalten oder Metadaten hinzuzufügen. Unten sehen Sie ein Beispiel für einen einfachen Klassendekorator:

function LogClass(constructor: Function) {
  console.log('Class Decorator called:', constructor);
}

@LogClass
class MyService {
  constructor() {
    console.log('MyService created');
  }
}

Hier ist die Funktion LogClass ein benutzerdefinierter Dekorator, der die Klasse bei ihrer Definition in der Konsole protokolliert. Durch Anwenden von @LogClass auf MyService werden während der Erstellung Nachrichten protokolliert.

Abschluss

Dekoratoren in Angular bieten eine leistungsstarke Möglichkeit, Klassen, Methoden, Eigenschaften und Parametern Metadaten und Verhalten hinzuzufügen. Für eine effektive Angular-Entwicklung ist es wichtig zu wissen, wie integrierte Dekoratoren wie @Component, @Injectable, @Input und @Output verwendet werden. Darüber hinaus können benutzerdefinierte Dekoratoren erstellt werden, um die spezifischen Anforderungen einer Anwendung zu erfüllen und so den Entwicklungsprozess flexibler zu gestalten.