Какие есть декораторы классов в Angular?

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

Основные классовые декораторы в Angular:

1. @Component

Это один из самых часто используемых декораторов в Angular, который определяет компонент. Он позволяет указать метаданные, такие как селектор, шаблон и стили.

Пример:

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

@Component({
  selector: 'app-my-component',
  template: `<h1>Привет, мир!</h1>`,
  styles: [`h1 { color: green; }`]
})
export class MyComponent { }

2. @NgModule

Этот декоратор используется для определения Angular модуля. Он позволяет организовать компоненты, сервисы и другие модули в одну сущность.

Пример:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyComponent } from './my-component';

@NgModule({
  declarations: [MyComponent],
  imports: [BrowserModule],
  bootstrap: [MyComponent]
})
export class AppModule { }

3. @Injectable

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

Пример:

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

@Injectable({
  providedIn: 'root',
})
export class MyService {
  getData() {
    return ['item1', 'item2', 'item3'];
  }
}

4. @Directive

Декоратор @Directive используется для создания директив, которые могут изменять поведение или внешний вид элементов в шаблона.

Пример:

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(el: ElementRef, renderer: Renderer2) {
    renderer.setStyle(el.nativeElement, 'backgroundColor', 'yellow');
  }
}

Заключение

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