1. На главную
  2. Новости
  3. Декораторы в Angular

ANGULAR19 октября

Декораторы в Angular

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

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

  1. @Component — декоратор для создания компонентов.
  2. @Directive — декоратор для создания директив.
  3. @Injectable — декоратор для создания сервисов.
  4. @NgModule — декоратор для создания модулей.
  5. @Input и @Output — декораторы для взаимодействия между компонентами.
  6. @HostListener и @HostBinding — декораторы для работы с событиями и привязкой к свойствам DOM-элементов.

Декоратор @Component

@Component используется для создания компонента и определения его метаданных, таких как селектор, шаблон, стили и многое другое.

Пример:

import { Component } from '@angular/core';
 @Component({ selector: 'app-root', templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'] })
 export class AppComponent { title = 'My Angular App'; }
  • selector: указывает имя селектора, которое используется для вставки компонента в HTML.
  • templateUrl: путь к файлу с HTML-шаблоном.
  • styleUrls: массив путей к файлам со стилями для компонента.

 

Декоратор @Directive

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

Пример:

import { Directive, ElementRef, Renderer2 } from '@angular/core';
@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
 constructor(el: ElementRef, renderer: Renderer2) {
   renderer.setStyle(el.nativeElement, 'background-color', 'yellow'); } }

  • Директива appHighlight изменяет фон элемента на жёлтый.

  • Она используется как атрибут в HTML: <p appHighlight>Текст с выделением</p>.

 

Декоратор @Injectable

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

Пример:

import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class DataService { getData() {
  return ['Data 1', 'Data 2', 'Data 3']; } }
  • Декоратор @Injectable указывает, что DataService может быть внедрён (инжектирован) в другие компоненты.
  • Параметр { providedIn: 'root' } означает, что сервис будет доступен на уровне всего приложения.

 

Декоратор @NgModule

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

Пример:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

  • declarations: список компонентов, директив и пайпов, объявленных в модуле.
  • imports: список других модулей, которые импортируются в этот модуль.
  • bootstrap: корневой компонент, который будет загружен при запуске приложения.

 

Декораторы @Input и @Output

Эти декораторы используются для обмена данными между родительским и дочерним компонентами.

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

Пример с @Input:

import { Component, Input } from '@angular/core';
 
@Component({
  selector: 'app-child',
  template: `<p>{{ name }}</p>`
})
export class ChildComponent {
  @Input() name: string;
}

В этом примере переменная name передаётся в дочерний компонент через родительский:

html

 <app-child [name]="'Angular'"></app-child>

Пример с @Output:

import { Component, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `<button (click)="sendData()">Send Data</button>`
})
  export class ChildComponent {
    @Output() dataEvent = new EventEmitter<string>();
    sendData(){
        this.dataEvent.emit('Hello from child'); } }

Здесь метод sendData() отправляет событие в родительский компонент.

Декораторы @HostListener и @HostBinding

  • @HostListener позволяет реагировать на события хост-элемента.

  • @HostBinding привязывает свойство класса к свойству хоста.

Пример с @HostListener и @HostBinding:

import { Directive, HostListener, HostBinding } from '@angular/core';
 
@Directive({
  selector: '[appHoverHighlight]'
})
export class HoverHighlightDirective {
  @HostBinding('style.backgroundColor') backgroundColor: string;
 
  @HostListener('mouseenter') onMouseEnter() {
    this.backgroundColor = 'yellow';
  }
 
  @HostListener('mouseleave') onMouseLeave() {
    this.backgroundColor = 'white';
  }
}
 
  • @HostBinding('style.backgroundColor'): привязывает свойство backgroundColor к стилю элемента.
  • @HostListener('mouseenter'): реагирует на событие наведения мыши.

Итог:

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

Декораторы в TypeScript

Теги: #angular

Комментарии

Добавить комментарий:

Отметьте что вы не робот

Вернуться наверх