Компонентный декоратор

Что он делает

Помечает класс как Angular-компонент и собирает метаданные конфигурации компонента.

Как использовать

.

@Component({selector: 'greet', template: 'Hello {{name}}!'})
class Greet {
  name: string = 'World';
}

Описание

Декоратор компонента позволяет пометить класс как Angular-компонент и предоставить дополнительные метаданные, которые определяют, как компонент должен обрабатываться, инициализироваться и использоваться во время выполнения.

Компоненты являются основным строительным блоком пользовательского интерфейса в приложении Angular. Приложение Angular представляет собой дерево Angular-компонентов. Angular-компоненты являются подмножеством директив. В отличие от директив, компоненты всегда имеют шаблон, и только один компонент может быть инициализирован на один элемент в шаблоне.

Компонент должен принадлежать NgModule, чтобы его можно было использовать другим компонентом или приложением. Чтобы указать, что компонент является членом NgModule, необходимо указать его в поле declarations этого NgModule.

В дополнение к конфигурации метаданных, указанной с помощью декоратора компонента, компоненты могут управлять своим поведением во время выполнения, реализуя различные жизненные циклы.

Свойства метаданных:

• animations - список анимаций этого компонента
• changeDetection - стратегия обнаружения изменений, используемая этим компонентом
• encapsulation - стратегия инкапсуляции стилей, используемая этим компонентом
• entryComponents - список компонентов, которые динамически вставляются в представление этого компонента
• exportAs - имя, под которым экземпляр компонента экспортируется в шаблоне
• host - карта свойств класса к привязка элементов хоста для событий, свойств и атрибутов
• inputs - список имён свойств класса для привязки данных как входных данных компонента
• interpolation - пользовательские маркеры интерполяции, используемые в шаблоне этого компонента
• moduleId - идентификатор модуля ES/CommonJS файла, в котором определен этот компонент
• outputs - список имён свойств класса, которые экспонируют выходные события, на которые могут подписываться другие
• providers - список поставщиков, доступных для этого компонента и его потомков
• queries - настройка запросов, которые могут быть инжектированы в компонент
• selector - CSS-селектор, который идентифицирует этот компонент в шаблоне
• styleUrls - список URL-адресов стилей, которые будут применяться к представлению этого компонента
• styles - встроенные стили, которые будут применяться к представлению этого компонента
• template - встроенный шаблон для представления
• templateUrl - URL внешнего файла, содержащего шаблон для представления
• viewProviders - список поставщиков, доступных для этого компонента и его потомков представления

Пример

@Component({selector: 'greet', template: 'Hello {{name}}!'})
class Greet {
  name: string = 'World';
}

экспортировано из @angular/core/index, определено в @angular/core/src/metadata/directives.ts