Jak pracować z dekoratorami TypeScript w Angular

Dekoratory TypeScript to specjalny rodzaj deklaracji, który można dołączyć do klasy, metody, akcesora, właściwości lub parametru. W Angularze dekoratory zapewniają sposób dodawania metadanych do klas, co czyni je niezwykle wydajnymi w tworzeniu wielokrotnego użytku komponentów, usług i innych. Ten przewodnik wyjaśnia, jak pracować z dekoratorami TypeScript w Angularze, podając przykłady pomagające lepiej zrozumieć ich zastosowanie.

Czym są dekoratory TypeScript?

Dekoratory to funkcje, które modyfikują zachowanie klasy lub członka klasy. W Angularze dekoratory służą do definiowania komponentów, dyrektyw, potoków i wstrzykiwalnych usług. Zapewniają deklaratywny sposób stosowania metadanych do klasy, których Angular używa do różnych celów, takich jak tworzenie wystąpień komponentów lub wstrzykiwanie zależności.

Popularne dekoratory kątowe

Angular ma kilka wbudowanych dekoratorów używanych do różnych celów. Poniżej znajdują się najpopularniejsze dekoratory Angular:

• @Component – Definiuje komponent Angulara.
• @Directive – Definiuje dyrektywę Angulara.
• @Pipe – Definiuje potok Angular.
• @Injectable – Definiuje usługę, którą można wstrzykiwać do innych komponentów lub usług.
• @Input – Dekoruje właściwość, aby uczynić ją wejściem wiążącym dane.
• @Output – Dekoruje właściwość, aby uczynić ją wyjściem wiążącym zdarzenia.

Korzystanie z dekoratora @Component

Dekorator @Component służy do definiowania komponentu Angular. Dostarcza metadanych o komponencie, takich jak jego selektor, szablon, style i inne konfiguracje.

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

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

W tym przykładzie dekorator @Component definiuje prosty komponent z szablonem wyświetlającym „Hello, World!”. Selektor określa niestandardowy znacznik HTML, który ma być użyty dla tego komponentu.

Korzystanie z @Injectable Decorator

Dekorator @Injectable służy do definiowania klasy usługi, którą można wstrzykiwać do innych komponentów lub usług. Jest to istotna część systemu wstrzykiwania zależności Angulara.

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

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

Tutaj dekorator @Injectable udostępnia usługę DataService na potrzeby wstrzykiwania zależności w całej aplikacji.

Korzystanie z dekoratorów @Input i @Output

Dekoratory @Input i @Output służą do tworzenia właściwości wejściowych i zdarzeń wyjściowych w komponentach Angular. Są powszechnie używane do komunikacji komponentów.

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

W tym przykładzie dekorator @Input jest używany do przekazywania danych z komponentu nadrzędnego do komponentu podrzędnego. Dekorator @Output jest używany do wysyłania danych z komponentu podrzędnego z powrotem do komponentu nadrzędnego poprzez zdarzenie.

Tworzenie niestandardowych dekoratorów

W Angular można tworzyć niestandardowe dekoratory, aby dodać określone zachowanie lub metadane do klas, metod lub właściwości. Poniżej znajduje się przykład prostego dekoratora klasy:

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

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

Tutaj funkcja LogClass jest niestandardowym dekoratorem, który loguje klasę do konsoli, gdy jest zdefiniowana. Zastosowanie @LogClass do MyService loguje komunikaty podczas jej tworzenia.

Wniosek

Dekoratory w Angularze zapewniają potężny sposób dodawania metadanych i zachowań do klas, metod, właściwości i parametrów. Zrozumienie, jak używać wbudowanych dekoratorów, takich jak @Component, @Injectable, @Input i @Output, jest niezbędne do efektywnego rozwoju Angulara. Ponadto można tworzyć niestandardowe dekoratory, aby spełnić określone potrzeby w aplikacji, dodając elastyczności do procesu rozwoju.