Hoe u met TypeScript-decorators in Angular kunt werken

TypeScript-decorators zijn een speciaal soort declaratie die aan een klasse, methode, accessor, eigenschap of parameter kan worden gekoppeld. In Angular bieden decorators een manier om metadata aan klassen toe te voegen, waardoor ze zeer krachtig zijn voor het maken van herbruikbare componenten, services en meer. Deze gids legt uit hoe u met TypeScript-decorators in Angular kunt werken en biedt voorbeelden om hun gebruik beter te begrijpen.

Wat zijn TypeScript-decorators?

Decorators zijn functies die het gedrag van een klasse of klasselid wijzigen. In Angular worden decorators gebruikt om componenten, richtlijnen, pipes en injecteerbare services te definiëren. Ze bieden een declaratieve manier om metadata toe te passen op een klasse, die Angular gebruikt voor verschillende doeleinden, zoals het maken van instanties van componenten of het injecteren van afhankelijkheden.

Veelvoorkomende hoekige decorateurs

Angular heeft verschillende ingebouwde decorators die voor verschillende doeleinden worden gebruikt. Hieronder staan ​​de meest voorkomende Angular decorators:

• @Component - Definieert een Angular-component.
• @Directive - Definieert een Angular-richtlijn.
• @Pipe - Definieert een Angular-pijp.
• @Injectable - Definieert een service die in andere componenten of services kan worden geïnjecteerd.
• @Input - Versiert een eigenschap zodat deze een databindende invoer wordt.
• @Output - Versiert een eigenschap zodat deze een gebeurtenisbindende uitvoer wordt.

@Component Decorator gebruiken

De decorator @Component wordt gebruikt om een ​​Angular-component te definiëren. Het biedt metadata over de component, zoals de selector, template, styles en andere configuraties.

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

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

In dit voorbeeld definieert de decorator @Component een eenvoudig component met een sjabloon die "Hello, World!" weergeeft. De selector specificeert de aangepaste HTML-tag die voor dit component moet worden gebruikt.

@Injectable Decorator gebruiken

De decorator @Injectable wordt gebruikt om een ​​serviceklasse te definiëren die in andere componenten of services kan worden geïnjecteerd. Het is een essentieel onderdeel van Angular's dependency injection-systeem.

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

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

Hier maakt de decorator @Injectable de DataService beschikbaar voor afhankelijkheidsinjectie in de hele applicatie.

@Input- en @Output-decorators gebruiken

De decorators @Input en @Output worden gebruikt om invoereigenschappen en uitvoergebeurtenissen in Angular-componenten te maken. Ze worden vaak gebruikt voor componentcommunicatie.

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 dit voorbeeld wordt de decorator @Input gebruikt om gegevens van een bovenliggend component door te geven aan een onderliggend component. De decorator @Output wordt gebruikt om gegevens van het onderliggend component terug te sturen naar het bovenliggende component via een gebeurtenis.

Het creëren van aangepaste decorateurs

Aangepaste decorators kunnen in Angular worden gemaakt om specifiek gedrag of metadata toe te voegen aan klassen, methoden of eigenschappen. Hieronder ziet u een voorbeeld van een eenvoudige klassedecorator:

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

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

Hier is de functie LogClass een aangepaste decorator die de klasse logt naar de console wanneer deze is gedefinieerd. Door @LogClass toe te passen op MyService worden berichten gelogd tijdens het maken ervan.

Conclusie

Decorators in Angular bieden een krachtige manier om metadata en gedrag toe te voegen aan klassen, methoden, eigenschappen en parameters. Begrijpen hoe u ingebouwde decorators zoals @Component, @Injectable, @Input en @Output gebruikt, is essentieel voor effectieve Angular-ontwikkeling. Daarnaast kunnen aangepaste decorators worden gemaakt om te voldoen aan specifieke behoeften in een applicatie, wat flexibiliteit toevoegt aan het ontwikkelingsproces.