Какие свойства есть у декоратора?angular-26

Основные декораторы Angular и их свойства

1. @Component

Декоратор для определения компонентов со следующими свойствами:

@Component({
  selector: 'app-example',          // CSS-селектор компонента
  templateUrl: './template.html',   // Путь к внешнему шаблону
  template: '<div>Inline</div>',    // Встроенный шаблон (альтернатива templateUrl)
  styleUrls: ['./styles.css'],      // Массив стилей
  styles: ['.class { color: red }'], // Встроенные стили
  providers: [MyService],           // Локальные провайдеры
  changeDetection: ChangeDetectionStrategy.OnPush, // Стратегия обнаружения изменений
  encapsulation: ViewEncapsulation.Emulated, // Стратегия инкапсуляции стилей
  animations: [myAnimation]        // Анимации компонента
})

2. @Directive

Декоратор для директив:

@Directive({
  selector: '[appHighlight]',       // Селектор атрибута/элемента
  providers: [DirectiveService],    // Локальные провайдеры
  host: {                          // Привязка к свойствам хоста
    '(mouseenter)': 'onMouseEnter()',
    '[class.highlight]': 'isActive'
  },
  exportAs: 'hl'                   // Имя для экспорта в шаблон
})

3. @Injectable

Декоратор для сервисов:

@Injectable({
  providedIn: 'root' | 'platform' | 'any' | Type, // Область видимости
  useValue: {...},                // Готовое значение
  useClass: MyService,            // Класс для инстанцирования
  useFactory: myFactory,          // Фабричная функция
  useExisting: ExistingService    // Ссылка на существующий сервис
})

4. @Input

Декоратор для входных свойств:

@Input({
  alias: 'shortName',            // Публичное имя свойства
  required: true,                // Обязательность (Angular 16+)
  transform: booleanAttribute    // Преобразование значения (Angular 16+)
})
title: string;

5. @Output

Декоратор для выходных событий:

@Output({
  alias: 'shortEvent'            // Публичное имя события
})
valueChange = new EventEmitter();

6. @ViewChild/@ViewChildren

Декораторы для доступа к элементам:

@ViewChild('ref', {
  read: ElementRef,              // Тип возвращаемого элемента
  static: true                   // Доступность в ngOnInit
})
element: ElementRef;

@ViewChildren(ItemDirective, {
  read: ViewContainerRef
})
items: QueryList<ViewContainerRef>;

7. @ContentChild/@ContentChildren

Аналогично ViewChild, но для проекционного контента:

@ContentChild(TemplateRef, {
  descendants: true              // Включая вложенные элементы
})
template: TemplateRef<any>;

Общие свойства декораторов

  1. Конфигурационные объекты:

    • Все декораторы принимают объект конфигурации
    • Свойства зависят от типа декоратора
  2. Типизация:

    • Каждый декоратор строго типизирован
    • Подсказки TypeScript помогают в разработке
  3. Время выполнения:

    • Метаданные собираются во время компиляции
    • Используются Angular компилятором и рантаймом

Особенности версий Angular

  1. Angular 14+:

    • Упрощенный DI с inject() вместо конструктора
    • Стандартные имена для входов/выходов
  2. Angular 16+:

    • required для @Input
    • transform для преобразования значений
  3. Angular 17+:

    • Улучшенные сигналы
    • Новые опции для deferrable views

Лучшие практики использования

  1. Минимизация зависимостей:

    • Используйте минимально необходимый набор свойств
  2. Семантические имена:

    • Четкие selector'ы и alias'ы
  3. Оптимальная стратегия:

    • OnPush для производительности
    • Правильный выбор encapsulation
  4. Документация:

    • Комментируйте неочевидные настройки

Резюмируем

  1. Каждый декоратор имеет уникальный набор свойств:

    • @Component - настройки шаблонов и стилей
    • @Directive - параметры поведения
    • @Injectable - DI-конфигурация
    • @Input/@Output - управление API компонента
    • View/Content декораторы - параметры доступа к элементам
  2. Эволюция API:

    • Новые версии Angular добавляют свойства
    • Следите за обновлениями
  3. Ключевой принцип:

    • Используйте свойства декораторов для точной настройки поведения
    • Избегайте избыточных конфигураций

Правильное использование свойств декораторов - признак профессионального Angular-разработчика.