Cum să lucrați cu decoratorii TypeScript în Angular

Decoratorii TypeScript sunt un tip special de declarație care poate fi atașat la o clasă, metodă, accesor, proprietate sau parametru. În Angular, decoratorii oferă o modalitate de a adăuga metadate la clase, făcându-le foarte puternice pentru a crea componente, servicii și multe altele reutilizabile. Acest ghid explică cum să lucrați cu decoratorii TypeScript în Angular, oferind exemple pentru a vă ajuta să înțelegeți mai bine utilizarea acestora.

Ce sunt decoratorii TypeScript?

Decoratorii sunt funcții care modifică comportamentul unei clase sau al unui membru al clasei. În Angular, decoratorii sunt utilizați pentru a defini componente, directive, țevi și servicii injectabile. Ele oferă o modalitate declarativă de a aplica metadate unei clase, pe care Angular le folosește în diverse scopuri, cum ar fi crearea de instanțe de componente sau injectarea de dependențe.

Decoratori unghiulari obișnuiți

Angular are mai mulți decoratori încorporați folosiți în diferite scopuri. Mai jos sunt cei mai obișnuiți decoratori Angular:

• @Component - Definește o componentă unghiulară.
• @Directive - Definește o directivă Angular.
• @Pipe - Definește o conductă unghiulară.
• @Injectable - Definește un serviciu care poate fi injectat în alte componente sau servicii.
• @Input - Decorează o proprietate pentru a o face o intrare de legare a datelor.
• @Output - Decorează o proprietate pentru a o transforma într-o ieșire legată de evenimente.

Folosind @Component Decorator

Decoratorul @Component este folosit pentru a defini o componentă Angular. Furnizează metadate despre componentă, cum ar fi selectorul, șablonul, stilurile și alte configurații.

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

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

În acest exemplu, decoratorul @Component definește o componentă simplă cu un șablon care afișează „Hello, World!”. selector specifică eticheta HTML personalizată de utilizat pentru această componentă.

Folosind @Injectable Decorator

Decoratorul @Injectable este folosit pentru a defini o clasă de servicii care poate fi injectată în alte componente sau servicii. Este o parte esențială a sistemului de injecție a dependenței Angular.

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

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

Aici, decoratorul @Injectable face ca DataService să fie disponibil pentru injectarea dependenței în întreaga aplicație.

Folosind decoratorii @Input și @Output

Decoratorii @Input și @Output sunt utilizați pentru a crea proprietăți de intrare și evenimente de ieșire în componentele Angular. Ele sunt utilizate în mod obișnuit pentru comunicarea componentelor.

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

În acest exemplu, decoratorul @Input este folosit pentru a transmite date de la o componentă părinte la o componentă secundară. Decoratorul @Output este folosit pentru a trimite date de la componenta copil înapoi către componenta părinte printr-un eveniment.

Crearea decoratorilor personalizați

Decoratorii personalizați pot fi creați în Angular pentru a adăuga un comportament sau metadate specifice la clase, metode sau proprietăți. Mai jos este un exemplu de decorator de clasă simplu:

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

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

Aici, funcția LogClass este un decorator personalizat care înregistrează clasa în consolă atunci când este definită. Aplicarea @LogClass la MyService înregistrează mesajele în timpul creării.

Concluzie

Decoratorii din Angular oferă o modalitate puternică de a adăuga metadate și comportament la clase, metode, proprietăți și parametri. Înțelegerea modului de utilizare a decoratorilor încorporați precum @Component, @Injectable, @Input și @Output este esențială pentru un Angular eficient. dezvoltare. În plus, decoratorii personalizați pot fi creați pentru a răspunde nevoilor specifice dintr-o aplicație, adăugând flexibilitate procesului de dezvoltare.