Sådan arbejder du med TypeScript-dekoratorer i Angular

TypeScript-dekoratorer er en speciel form for erklæring, der kan knyttes til en klasse, metode, accessor, egenskab eller parameter. I Angular giver dekoratører en måde at tilføje metadata til klasser, hvilket gør dem meget effektive til at skabe genanvendelige komponenter, tjenester og mere. Denne vejledning forklarer, hvordan man arbejder med TypeScript-dekoratorer i Angular, og giver eksempler for at hjælpe med at forstå deres brug bedre.

Hvad er TypeScript-dekoratører?

Dekoratorer er funktioner, der ændrer adfærden for en klasse eller et klassemedlem. I Angular bruges dekoratører til at definere komponenter, direktiver, rør og injicerbare tjenester. De giver en deklarativ måde at anvende metadata på en klasse, som Angular bruger til forskellige formål, såsom oprettelse af forekomster af komponenter eller indsprøjtning af afhængigheder.

Almindelige vinkeldekoratorer

Angular har flere indbyggede dekoratører, der bruges til forskellige formål. Nedenfor er de mest almindelige vinkeldekoratorer:

• @Component - Definerer en vinkelkomponent.
• @Directive - Definerer et vinkeldirektiv.
• @Rør - Definerer et vinkelrør.
• @Injectable - Definerer en service, der kan injiceres i andre komponenter eller tjenester.
• @Input - Dekorerer en egenskab for at gøre den til et databindende input.
• @Output - Dekorerer en egenskab for at gøre den til et hændelsesbindende output.

Brug af @Component Decorator

@Component dekoratoren bruges til at definere en vinkelkomponent. Det giver metadata om komponenten, såsom dens vælger, skabelon, typografier og andre konfigurationer.

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

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

I dette eksempel definerer @Component dekoratoren en simpel komponent med en skabelon, der viser "Hello, World!". vælgeren angiver det tilpassede HTML-tag, der skal bruges til denne komponent.

Brug af @Injectable Decorator

@Injectable dekoratoren bruges til at definere en serviceklasse, der kan injiceres i andre komponenter eller tjenester. Det er en væsentlig del af Angulars afhængighedsinjektionssystem.

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

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

Her gør @Injectable dekoratøren DataService tilgængelig for afhængighedsinjektion gennem hele applikationen.

Brug af @Input- og @Output-dekoratorer

@Input og @Output dekoratorerne bruges til at skabe inputegenskaber og outputhændelser i Angular-komponenter. De bruges almindeligvis til komponentkommunikation.

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!');
  }
}

I dette eksempel bruges @Input dekoratoren til at overføre data fra en overordnet komponent til en underordnet komponent. @Output dekoratoren bruges til at sende data fra den underordnede komponent tilbage til den overordnede komponent gennem en begivenhed.

Oprettelse af brugerdefinerede dekoratører

Brugerdefinerede dekoratører kan oprettes i Angular for at tilføje specifik adfærd eller metadata til klasser, metoder eller egenskaber. Nedenfor er et eksempel på en simpel klassedekoratør:

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

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

Her er LogClass-funktionen en brugerdefineret dekorator, der logger klassen til konsollen, når den er defineret. Ved at anvende @LogClass på MyService logges meddelelser under oprettelsen.

Konklusion

Dekoratorer i Angular giver en effektiv måde at tilføje metadata og adfærd til klasser, metoder, egenskaber og parametre. Forståelse af, hvordan man bruger indbyggede dekoratorer som @Component, @Injectable, @Input og @Output er afgørende for effektiv Angular udvikling. Derudover kan brugerdefinerede dekoratører oprettes for at imødekomme specifikke behov i en applikation, hvilket tilføjer fleksibilitet til udviklingsprocessen.