Как работать с декораторами TypeScript в Angular

Декораторы TypeScript — это особый вид объявления, который можно прикрепить к классу, методу, аксессору, свойству или параметру. В Angular декораторы предоставляют способ добавления метаданных к классам, что делает их очень мощным средством для создания повторно используемых компонентов, сервисов и многого другого. В этом руководстве объясняется, как работать с декораторами TypeScript в Angular, и приводятся примеры, помогающие лучше понять их использование.

Что такое декораторы TypeScript?

Декораторы — это функции, которые изменяют поведение класса или члена класса. В Angular декораторы используются для определения компонентов, директив, каналов и внедряемых служб. Они предоставляют декларативный способ применения метаданных к классу, который Angular использует для различных целей, таких как создание экземпляров компонентов или внедрение зависимостей.

Обычные угловые декораторы

Angular имеет несколько встроенных декораторов, используемых для разных целей. Ниже приведены наиболее распространенные декораторы Angular:

• @Component — определяет компонент Angular.
• @Directive — определяет директиву Angular.
• @Pipe — определяет угловую трубу.
• @Injectable — определяет службу, которая может быть внедрена в другие компоненты или службы.
• @Input — декорирует свойство, делая его входным значением привязки данных.
• @Output — декорирует свойство, делая его выводом, привязываемым к событию.

Использование декоратора @Component

Декоратор @Component используется для определения компонента Angular. Он предоставляет метаданные о компоненте, такие как его селектор, шаблон, стили и другие конфигурации.

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

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

В этом примере декоратор @Component определяет простой компонент с шаблоном, отображающим "Hello, World!". Селектор указывает пользовательский тег HTML для использования в этом компоненте.

Использование декоратора @Injectable

Декоратор @Injectable используется для определения класса сервиса, который может быть внедрен в другие компоненты или сервисы. Это неотъемлемая часть системы внедрения зависимостей Angular.

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

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

Здесь декоратор @Injectable делает DataService доступным для внедрения зависимостей во всем приложении.

Использование декораторов @Input и @Output

Декораторы @Input и @Output используются для создания входных свойств и выходных событий в компонентах Angular. Они обычно используются для взаимодействия компонентов.

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

В этом примере декоратор @Input используется для передачи данных из родительского компонента в дочерний компонент. Декоратор @Output используется для отправки данных из дочернего компонента обратно в родительский компонент через событие.

Создание пользовательских декораторов

В Angular можно создавать пользовательские декораторы для добавления определенного поведения или метаданных к классам, методам или свойствам. Ниже приведен пример простого декоратора класса:

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

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

Здесь функция LogClass — это пользовательский декоратор, который регистрирует класс в консоли при его определении. Применение @LogClass к MyService регистрирует сообщения во время его создания.

Заключение

Декораторы в Angular предоставляют мощный способ добавления метаданных и поведения в классы, методы, свойства и параметры. Понимание того, как использовать встроенные декораторы, такие как @Component, @Injectable, @Input и @Output, имеет важное значение для эффективной разработки Angular. Кроме того, можно создавать пользовательские декораторы для удовлетворения конкретных потребностей в приложении, что добавляет гибкости процессу разработки.