Компоненты в Angular: создание, использование и маршрутизация

Что такое компонент

Компонент — один из важнейших строительных блоков Angular-приложения. Это модульный, переиспользуемый фрагмент кода, который отвечает за отображение и поведение части интерфейса. Простая дефиниция: компонент = шаблон (HTML) + стили (CSS) + логика (TypeScript).

Примеры компонентов:

• Мелкие элементы UI: кнопки, карточки, аватары.
• Крупные элементы: боковые панели, навигационные панели, целые страницы.

Преимущества компонентов:

• Повторное использование кода.
• Разделение ответственности (display vs logic).
• Удобство тестирования.

Важно: компонент — не единственный тип артефакта в Angular. Директивы и пайпы решают свои задачи (поведение DOM и форматирование данных соответственно).

Использование компонентов в Angular

Когда вы создаёте компонент, вы можете вставлять его в шаблоны других компонентов как обычный HTML-тег. Например, если селектор компонента — app-new-component, то в другом шаблоне вы можете использовать:

Поскольку компонент — повторно используемый фрагмент, ему можно передавать входные параметры (inputs), чтобы отличать отдельные экземпляры. Также целые компоненты могут быть маршрутами (страницами) в приложении — они подключаются через app-routing.module.ts.

Совет по структуре: проектируйте компоненты по ответственности — представление (ui) отдельно от контейнерной логики (container/smart component), чтобы было проще тестировать и переиспользовать.

Как создать компонент

Самый быстрый путь — использовать Angular CLI. Ниже — пошаговая инструкция.

1. Создайте новое приложение Angular с помощью ng new или откройте существующее.
2. Откройте терминал или встроенную консоль в IDE (например, Visual Studio Code).
3. Перейдите в корневую папку проекта, например:

cd C:\Users\Sharl\Desktop\Angular-Application

4. Выполните команду генерации компонента, указав его имя:

ng generate component ui-card

CLI создаст новую папку для компонента внутри src/app — там будут файлы HTML, CSS, TypeScript и spec.ts для тестов.

Важно: в современных версиях Angular есть флаг –standalone для создания компонент без необходимости регистрации в NgModule.

Как добавить содержимое в компонент

При создании Angular генерирует для каждого компонента несколько файлов:

• HTML — шаблон (отвечает за разметку).
• CSS (или SCSS) — стили компонента.
• TypeScript (.ts) — логика компонента.
• spec.ts — модуль для unit-тестов.

Добавим содержимое в ui-card.

1. Откройте src/app/ui-card/ui-card.component.html и замените содержимое на следующее. Убедитесь, что в src/assets/images есть изображение с указанным именем.

  
  

    
 Blue Mountains 
    
 NSW, Australia 
  

2. Откройте ui-card.component.css и добавьте стили:

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  width: 400px;
  padding: 8px;
  margin: 24px;
  background-color: whitesmoke;
  font-family: sans-serif;
}

.card img {
  max-width: 400px;
}

.title {
  padding-top: 16px;
}

.container {
  padding: 2px 16px;
}

3. В ui-card.component.ts уже есть класс компонента — здесь вы будете добавлять функции и бизнес-логику.

export class UiCardComponent implements OnInit {
  constructor() { }
  ngOnInit(): void {
    // Add some code logic here
  }
  // Or, add your logic and functionality in new functions
}

Подсказка: соблюдайте единый стиль именования и структуру папок — src/app//.

Как использовать компонент в HTML другого компонента

Внутри ui-card.component.ts есть атрибуты: selector, templateUrl и styleUrls. selector определяет HTML-тег, который вы будете вставлять в другие шаблоны.

Пример определения:

@Component({
  selector: 'app-ui-card',
  templateUrl: './ui-card.component.html',
  styleUrls: ['./ui-card.component.css']
})

Чтобы использовать компонент, вставьте тег селектора в app.component.html.

1. Добавьте навбар в src/app/app.component.html:

   Web Navbar 

2. Добавьте стили навбара в src/app/app.component.css:

.navbar-header {
  background-color: #07393C;
  padding: 30px 50px;
  display: flex;
  align-items: center;
  font-family: sans-serif;
}

.nav-title {
  text-decoration: none;
  color: white;
  font-size: 16pt;
}

3. Под навбаром вставьте компонент ui-card:

4. Чтобы показать несколько карточек, можно повторить тег или расположить их в контейнере:

Запустите приложение командой ng serve и откройте http://localhost:4200.

Как передавать входные параметры в компонент

Чтобы каждый экземпляр компонента показывал разные данные, используйте Input-параметры.

1. Добавьте Input в список импортов в ui-card.component.ts:

import { Component, Input, OnInit } from '@angular/core';

2. Добавьте два входных свойства в класс компонента:

export class UiCardComponent implements OnInit {
  @Input() locationName: string;
  @Input() imageName: string;

  constructor() { }

  ngOnInit(): void {
    if (this.imageName) {
      this.imageName = "./assets/images/" + this.imageName;
    } else {
      this.imageName = "./assets/images/blue-mountains.jpg";
    }
  }
}

3. Обновите ui-card.component.html, чтобы использовать binding:

  
  

    
{{locationName ? locationName : 'Blue Mountains'}}
    
NSW, Australia
  

4. В app.component.html передавайте значения через привязку свойств:

Если вы увидите ошибку про отсутствие инициализаторов для свойств, можно временно выключить строгое требование в tsconfig.json:

// В tsconfig.json
"strictPropertyInitialization": false

Важно: лучше явно инициализировать свойства или назначать им опциональный тип (например, imageName?: string) и учитывать undefined в логике.

Как маршрутизировать к новому компоненту

Если компонент представляет страницу, добавьте маршрут к нему.

1. В app-routing.module.ts импортируйте компонент:

import { UiCardComponent } from './ui-card/ui-card.component';

2. Добавьте путь в массив routes:

const routes: Routes = [
  // ... Any other routes you may need ...
  { path: 'uicard', component: UiCardComponent },
];

3. Замените содержимое app.component.html на навбар и router-outlet, добавьте ссылку на маршрут:

   Web Navbar 
   UI Card 

4. Стили для ссылки в app.component.css:

.nav-a-link {
  text-decoration: none;
  color: #4b6569;
  font-size: 14pt;
  margin-left: 60px;
  font-weight: lighter;
}

Запустите ng serve и перейдите по ссылке — роут загрузит компонент.

Обратите внимание на URL: по умолчанию http://localhost:4200, роут /uicard даст http://localhost:4200/uicard.

Когда компоненты не работают — распространённые причины и отладка

• Компонент не объявлён в NgModule (declarations) — ошибка: selector не распознан.
• Неправильный selector или опечатка в теге.
• Путь к изображению указан неверно — проверьте папку assets и относительные пути.
• Строгая инициализация свойств TypeScript — объявите значения по умолчанию или задайте опциональные типы.
• Ошибки Change Detection: для больших приложений рассмотрите strategy: ChangeDetectionStrategy.OnPush.

Совет по отладке: откройте консоль браузера и терминал сборки — большинство ошибок Angular выводит понятные сообщения.

Альтернативные подходы и расширения

• Standalone компоненты (Angular 14+): создают компоненты без необходимости регистрации в NgModule.
• Компонентные библиотеки: вынесите повторно используемые компоненты в отдельный npm-пакет.
• Шаблонные UI-библиотеки (Material, NG-Zorro): используйте готовые стилизованные компоненты, чтобы ускорить разработку.
• Серверный рендеринг (Angular Universal) для SEO-критичных страниц.

Мини‑методология: создание компонента шаг за шагом

1. Определите ответственность компонента (single responsibility).
2. Решите: presentational (только отображение) vs container (логика, запросы данных).
3. Сгенерируйте компонент через CLI.
4. Добавьте шаблон и стили; придерживайтесь BEM или выбранной методологии CSS.
5. Пропишите входные свойства (@Input) и выходные события (@Output).
6. Добавьте unit-тесты в spec.ts.
7. При необходимости — зарегистрируйте маршрут и адаптируйте accessibility (aria-label, roles).

Контрольные списки по ролям

Разработчик:

• Компонент сгенерирован через CLI или создан вручную.
• Добавлены @Input/@Output для взаимодействия.
• Файлы стилей и шаблона организованы.
• Unit-тесты покрывают ключевую логику.

Дизайнер/Frontend:

• Проверена адаптивность (mobile, tablet, desktop).
• Соответствие дизайну (цвета, отступы, типографика).
• Проверены состояния (hover, focus, active).

QA:

• Компонент корректно рендерится для разных входных данных.
• Нет утечек стилей в другие компоненты.
• Проверены сценарии пустых значений и ошибок загрузки изображений.

Критерии приёмки

• Компонент отображается без ошибок в консоли.
• Переданные входные параметры корректно подставляются.
• Компонент корректно повторно используется в нескольких местах.
• Маршрут к компоненту работает и отображает ожидаемый контент.
• Unit-тесты выполняются успешно.

Примеры тест-кейсов

• TC1: Рендер с дефолтным изображением, когда imageName не задан.
• TC2: Передача locationName и проверка текста заголовка.
• TC3: Несуществующий путь к изображению — отображение альтернативного текста (alt).
• TC4: Проверка, что при клике на ссылку в навбаре загружается маршрут /uicard.

Небольшая диаграмма принятия решения (Mermaid)

flowchart TD
  A[Нужно собрать UI-фрагмент?] -->|Да| B{Это логика или только отображение?}
  B -->|Только отображение| C[Создать presentational компонент]
  B -->|Есть логика/запросы| D[Создать container компонент]
  A -->|Нет| E[Использовать директиву или пайп]
  C --> F{Нужно экспортировать в библиотеку?}
  F -->|Да| G[Вынести в библиотеку компонентов]
  F -->|Нет| H[Оставить в feature-модуле]

Краткий глоссарий (1‑строчное объяснение)

• Selector — имя тега компонента, которое вы вставляете в шаблон.
• @Input — декоратор для входных свойств компонента.
• Route — правило маршрутизации, связывающее URL и компонент.
• Standalone component — компонент, который не требует регистрации в NgModule.

Безопасность и приватность

• Изображения в assets читаются публично — не храните там приватные данные.
• При загрузке данных от пользователя выполняйте валидацию и экранирование, чтобы избежать XSS.

Когда выбрать компонент, а когда нет — контрпример

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

Советы по миграции и совместимости

• При обновлении Angular внимательно изучите breaking changes в официальном changelog.
• Для перехода на standalone-компоненты начинайте с простых presentational компонентов.

Резюме

Компоненты — ключевая единица повторного использования в Angular. CLI ускоряет создание, а Input/@Output позволяют настраивать поведение конкретных экземпляров. Для страниц компоненты интегрируются с маршрутизатором. Соблюдайте принципы разбиения ответственности, пишите тесты и проверяйте правильность путей к ресурсам.

Важное: если появляется ошибка про инициализацию свойств — исправьте типы или конфигурацию компилятора в tsconfig.json, но лучше явно инициализировать поля.

Помните также о роли дизайна, тестирования и контроля качества: общий результат — надёжный, переиспользуемый UI с предсказуемым поведением.