Компоненты: standalone-основа

Интерфейс крупного приложения - это сотни кнопок, карточек, таблиц и форм. Если описывать их одним монолитным HTML, поддержка превращается в кошмар: правка в одном месте ломает три других. Angular предлагает разбить интерфейс на компоненты - самостоятельные кирпичики, каждый со своим шаблоном, логикой и стилями. Карточка пользователя становится переиспользуемым блоком, который вставляется десятком строк там, где нужен.

• Google Cloud Console: каждая панель, таблица ресурсов и диалог - отдельный переиспользуемый компонент
• Дизайн-системы вроде Angular Material: кнопки, поля, таблицы поставляются как готовые компоненты
• Энтерпрайз-дашборды: один компонент-виджет переиспользуется на десятках экранов с разными данными
• Команды в больших организациях: один отдел владеет компонентом, другие его подключают, не зная внутренностей
• Storybook-каталоги: компоненты документируются и тестируются в изоляции, отдельно от приложения

Предварительные знания

• Урок ng-02: CLI, ng generate и структура проекта
• Базовый TypeScript: классы и декораторы как идея
• Понимание HTML-разметки
• Идея переиспользования кода: один блок применяется в разных местах

Декоратор @Component

Компонент в Angular - это класс на TypeScript, помеченный декоратором @Component. Декоратор - это метаданные, которые сообщают фреймворку, как обращаться с классом: какой у него тег (selector), какой шаблон рисовать (template) и какие стили применять (styles). Сам класс хранит данные и методы, а декоратор связывает его с разметкой.

Поле selector задаёт имя пользовательского тега. После объявления этот компонент вставляется в шаблон другого компонента как <app-greeting></app-greeting>. Префикс app- по соглашению отличает свои компоненты от стандартных HTML-тегов и от чужих библиотек.

Стили компонента по умолчанию инкапсулированы: CSS из user-card.css применяется только к этому компоненту и не протекает наружу. Это View Encapsulation, и она избавляет от классической боли глобальных стилей, конфликтующих между разными частями приложения.

Standalone и массив imports

Раньше каждый компонент должен был быть объявлен в каком-то NgModule, и зависимости подключались на уровне модуля. Это создавало много церемоний. Теперь компоненты standalone по умолчанию: они самодостаточны и сами объявляют, что им нужно, через массив imports прямо в декораторе. Чтобы использовать другой компонент в своём шаблоне, его добавляют в imports.

В массив imports попадают другие компоненты, директивы и пайпы, которые используются в шаблоне. Зависимости видны сразу в файле компонента, а не спрятаны в отдельном модуле. Это и есть смысл standalone: всё необходимое объявлено в одном месте, рядом с кодом, который этим пользуется.

Самозакрывающийся синтаксис <app-user-card /> работает в современных версиях Angular для компонентов без содержимого. Это короче классического <app-user-card></app-user-card> и привычно тем, кто знаком с JSX.

Если компонент используется в шаблоне, но забыт в массиве imports, Angular не найдёт его и шаблон не скомпилируется. Сообщение об ошибке обычно прямо указывает, какой компонент нужно добавить в imports.

Запуск приложения и дерево компонентов

Приложение начинается с одного корневого компонента, который запускается функцией bootstrapApplication в main.ts. Этот компонент рисуется в index.html на месте своего тега. Внутри его шаблона лежат другие компоненты, внутри них - ещё, и так образуется дерево компонентов. Каждый узел дерева - самостоятельный компонент со своими данными.

Корневой компонент App содержит UserList, а тот - несколько UserCard. Один и тот же UserCard переиспользуется многократно с разными данными. Так из мелких самостоятельных блоков собирается весь интерфейс, и каждый блок можно разрабатывать и тестировать отдельно.

Дерево компонентов - это не абстракция, а реальная иерархия в браузере. Расширение Angular DevTools показывает это дерево вживую, позволяя видеть, какой компонент где находится и какие данные он держит.

Связь с другими темами

Компонент - фундамент, на котором строится всё остальное:

• Шаблоны и привязки — Шаблон компонента наполняется интерполяцией, привязками свойств и событий
• Сигнальные input и output — Компоненты передают данные друг другу через входы и выходы
• Связь компонентов и проекция — Компоненты вкладываются друг в друга и проецируют содержимое через ng-content

Итог

• Компонент - базовый строительный блок Angular: класс с декоратором @Component, объединяющий логику, шаблон и стили
• selector задаёт имя тега, через который компонент вставляется в другие шаблоны
• Шаблон задаётся inline через template или внешним файлом через templateUrl, стили - аналогично
• Компоненты по умолчанию standalone: они не требуют NgModule, а зависимости перечисляются в массиве imports
• Корневой компонент запускается через bootstrapApplication в main.ts, дальше дерево компонентов строится вложением

Связанные уроки

• ng-02-setup-cli — ng generate component из прошлого урока создаёт именно те компоненты, что разбираются здесь
• ng-04-templates-binding — Шаблон компонента наполняется привязками данных - тема следующего урока
• ng-06-inputs-outputs — Компоненты обмениваются данными через сигнальные input и output