Создание и повторное использование компонентов в Angular

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

Примеры компонентов: кнопки, карточки, сайдбары, навигационные панели или целые страницы.

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

Компонент — это связка шаблона (HTML), стилей (CSS) и логики (TypeScript). Он инкапсулирует UI и поведение, чтобы вы могли применять одно и то же представление в разных местах приложения.

Определение в одну строку: компонент — автономный модуль интерфейса с входными/выходными точками для связи с приложением.

Ключевые атрибуты компонента в Angular: selector, templateUrl, styleUrls.

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

После создания компонент можно встраивать в другие компоненты как обычный HTML-тег. Пример использования в шаблоне:

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

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

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

Пошаговая инструкция:

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

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

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

ng generate component ui-card

5. Новый компонент появится в папке src/app.

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

Angular создаёт для компонента файлы: HTML, CSS, TypeScript и spec.ts для тестов.

• HTML — разметка компонента.
• CSS — стили компонента.
• spec.ts — тесты единицы.
• TypeScript — логика компонента.

Пример простого содержимого для 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  
}

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

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

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

Пример добавления навбара и использования компонента в src/app/app.component.html:

1. Добавьте навбар:

  
     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-карту:

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

5. Запустите приложение командой ng serve и откройте сайт в браузере.

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

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

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

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

2. Добавьте два входных свойства и постройте путь к изображению в ngOnInit:

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 замените статические значения на привязки:

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

4. В app.component.html передайте разные значения в каждый компонент. Убедитесь, что файлы изображений присутствуют в папке assets/images.

5. Запустите приложение: ng serve.

Если TypeScript жалуется на отсутствие инициализаторов, можно в tsconfig.json установить "strictPropertyInitialization": false.

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

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

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 оставьте навбар и добавьте ; добавьте ссылку в навбар:

  
     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;  
}

5. Запустите приложение: ng serve и откройте http://localhost:4200. При клике на ссылку откроется http://localhost:4200/uicard.

Повторение ключевых идей

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

Практические советы и лучшие практики

• Держите компоненты маленькими и однозадачными. Один компонент — одна ответственность.
• Разделяйте презентацию и логику: smart/container и dumb/presentational компоненты.
• Пишите unit-тесты для логики в spec.ts.
• Используйте Angular CLI для генерации компонентов — он создаёт корректные boilerplate файлы.
• Старайтесь не обращаться напрямую к DOM; используйте Renderer2 или шаблонные привязки.
• Локализуйте текст через i18n, если приложение мультиязычное.

Когда компонент не подходит

• Если нужно разделить поведение между несколькими несвязанными частями, лучше сервисы.
• Для низкоуровневого поведения элемента DOM используйте директивы.
• Для глобального состояния используйте сервисы или state management (NgRx, Akita).

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

• Директивы для изменения поведения DOM без отдельного шаблона.
• Сервисы для разделения состояния и логики.
• Web Components (Custom Elements) для совместного использования вне Angular.

Мини-методология разработки компонента

1. Проектирование: определите назначение, входы и события.
2. Генерация: ng generate component name.
3. Шаблон: добавьте HTML и семантическую разметку.
4. Стили: изолируйте CSS в скоуп компонента.
5. Логика: реализуйте функциональность и lifecycle hooks.
6. Тестирование: unit и e2e.
7. Документация: опишите API компонента (inputs/outputs).
8. Рефакторинг: разделите, если компонент растёт.

Чеклист ролей

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

• Создать компонент через CLI
• Добавить Input/Output
• Реализовать тесты

Тестировщик:

• Проверить рендеринг с разными входными данными
• Проверить отсутствие ошибок в консоли

Ревьювер:

• Убедиться, что компонент имеет одну ответственность
• Проверить соответствие стайлгайду

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

• Компонент рендерится без ошибок.
• Входные параметры корректно влияют на отображение.
• Стили не ломают адаптивность.
• Unit-тесты покрывают ключевые функции.

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

1. Рендеринг по умолчанию: без входных параметров компонент показывает Blue Mountains.
2. Передача imageName: компонент отображает указанную картинку.
3. Передача locationName: заголовок меняется на переданное значение.
4. Несуществующий файл изображения: приложение не падает — обработать fallback.

Отладка и типичные ошибки

• “Property has no initializer” — установить strictPropertyInitialization: false в tsconfig или дать дефолтные значения.
• Путь к картинкам: относительные пути зависят от сборки; убедитесь, что assets настроены в angular.json.
• Ошибка «Component is not part of any NgModule» — проверьте, что компонент объявлен в нужном модуле.

Дерево решений для выбора подхода

flowchart TD
  A[Нужен UI с шаблоном?] -->|Да| B[Создайте компонент]
  A -->|Нет, только поведение DOM| C[Создайте директиву]
  B --> D[Нужен доступ к глобальному состоянию?]
  D -->|Да| E[Используйте сервис/NgRx]
  D -->|Нет| F[Оставьте логику в компоненте]
  C --> G[Директива с HostListener/Renderer2]

Доступность и безопасность

• Используйте семантические теги (button, nav, header) и aria-атрибуты.
• Проверяйте контраст текста и фоны.
• Не вставляйте HTML из ненадёжных источников без санитизации.

Локализация для русскоязычных приложений

• Тексты храните в i18n-файлах или сервисах переводов.
• Форматы дат/чисел локализуйте через Angular pipes (DatePipe, DecimalPipe).
• Изображения с текстом лучше хранить в локализованных наборах, если требуется.

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

• При миграции с AngularJS используйте ngUpgrade или переписывайте компоненты постепенно.
• При обновлении Angular следите за breaking changes в release notes.
• Тестируйте компоненты в разных версиях TypeScript.

1‑строчный глоссарий

• Компонент — переиспользуемая единица UI + логики.
• Input — входное свойство компонента.
• Output — событие, которое компонент эмитит наружу.
• Selector — имя тега компонента.

Короткая инструкция для анонса (100–200 слов)

Создан компонент UI Card: он показывает изображение и название локации. Компонент сгенерирован через Angular CLI (ng generate component ui-card), содержит HTML/CSS/TS и поддерживает входные параметры locationName и imageName. Вы можете вставить компонент в любой шаблон как тег и передавать данные через привязки: [locationName] и [imageName]. Компонент также можно зарегистрировать в маршрутах и открыть как страницу приложения через app-routing.module.ts. В статье приведены примеры кода, чеклисты для разработчика и тестировщика, советы по отладке и рекомендации по доступности и локализации.

Краткое резюме

• Компоненты — основа Angular-приложений.
• Используйте CLI для создания и Input/Output для связи.
• Маршрутизация позволяет открывать компонент как страницу.
• Следуйте чеклистам и тест-кейсам перед приёмкой.