Декоратор для определения компонентов со следующими свойствами:
@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] // Анимации компонента
})
Декоратор для директив:
@Directive({
selector: '[appHighlight]', // Селектор атрибута/элемента
providers: [DirectiveService], // Локальные провайдеры
host: { // Привязка к свойствам хоста
'(mouseenter)': 'onMouseEnter()',
'[class.highlight]': 'isActive'
},
exportAs: 'hl' // Имя для экспорта в шаблон
})
Декоратор для сервисов:
@Injectable({
providedIn: 'root' | 'platform' | 'any' | Type, // Область видимости
useValue: {...}, // Готовое значение
useClass: MyService, // Класс для инстанцирования
useFactory: myFactory, // Фабричная функция
useExisting: ExistingService // Ссылка на существующий сервис
})
Декоратор для входных свойств:
@Input({
alias: 'shortName', // Публичное имя свойства
required: true, // Обязательность (Angular 16+)
transform: booleanAttribute // Преобразование значения (Angular 16+)
})
title: string;
Декоратор для выходных событий:
@Output({
alias: 'shortEvent' // Публичное имя события
})
valueChange = new EventEmitter();
Декораторы для доступа к элементам:
@ViewChild('ref', {
read: ElementRef, // Тип возвращаемого элемента
static: true // Доступность в ngOnInit
})
element: ElementRef;
@ViewChildren(ItemDirective, {
read: ViewContainerRef
})
items: QueryList<ViewContainerRef>;
Аналогично ViewChild, но для проекционного контента:
@ContentChild(TemplateRef, {
descendants: true // Включая вложенные элементы
})
template: TemplateRef<any>;
Конфигурационные объекты:
Типизация:
Время выполнения:
Angular 14+:
inject()
вместо конструктораAngular 16+:
required
для @Input
transform
для преобразования значенийAngular 17+:
Минимизация зависимостей:
Семантические имена:
Оптимальная стратегия:
Документация:
Каждый декоратор имеет уникальный набор свойств:
@Component
- настройки шаблонов и стилей@Directive
- параметры поведения@Injectable
- DI-конфигурация@Input/@Output
- управление API компонентаView/Content
декораторы - параметры доступа к элементамЭволюция API:
Ключевой принцип:
Правильное использование свойств декораторов - признак профессионального Angular-разработчика.