Создание и регистрация компонентов

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

Структура компонента

Каждый компонент в Angular требует как минимум трёх элементов:

  1. Шаблон (Template) — определяет HTML-структуру компонента, то, что пользователь видит в браузере. В шаблоне могут быть использованы Angular-диирективы и привязки.
  2. Класс (Class) — содержит логику и состояние компонента. В классе определяется поведение компонента, методы для обработки событий и взаимодействия с данными.
  3. Стили (Styles) — определяют внешний вид компонента. Обычно стили инкапсулируются, что позволяет избежать конфликтов между компонентами.

Команда для создания компонента

Для создания нового компонента Angular предоставляет команду ng generate component (или её сокращённую версию ng g c), которая автоматически создаёт все необходимые файлы:

ng generate component имя-компонента

Эта команда создаёт четыре файла:

  • имя-компонента.component.ts — класс компонента.
  • имя-компонента.component.html — шаблон компонента.
  • имя-компонента.component.css — стили компонента.
  • имя-компонента.component.spec.ts — тесты компонента (если включены тестовые фреймворки).

Пример компонента

Рассмотрим пример простого компонента:

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  title: string = 'Пример компонента';
}

В этом примере компонент ExampleComponent имеет свойство title, которое отображается в шаблоне. Атрибут selector указывает на имя тега, которое будет использоваться для внедрения компонента в другие части приложения. В данном случае компонент будет использоваться как <app-example></app-example>.

Шаблон компонента (example.component.html):

<h1>{{ title }}</h1>

Стили компонента (example.component.css):

h1 {
  color: blue;
}

Регистрация компонента

Чтобы компонент стал доступным для использования в приложении, его необходимо зарегистрировать в модуле. Каждый Angular-приложение организовано вокруг модулей, которые служат контейнерами для компонентов, директив, сервисов и других элементов. Модуль описывается в файле с расширением .module.ts.

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

Пример регистрации компонента в модуле:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ExampleComponent } from './example/example.component';

@NgModule({
  declarations: [
    ExampleComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [ExampleComponent]
})
export class AppModule { }

Здесь компонент ExampleComponent добавлен в массив declarations модуля AppModule, что позволяет использовать его внутри шаблонов этого модуля.

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

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

<app-example></app-example>

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

Передача данных в компоненты

Для того чтобы компонент мог принимать данные, используются входные параметры (inputs). В Angular они реализуются с помощью декоратора @Input(), который позволяет родительскому компоненту передавать данные в дочерний.

Пример использования входного параметра:

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

@Component({
  selector: 'app-child',
  template: `<h2>{{ name }}</h2>`
})
export class ChildComponent {
  @Input() name: string;
}

В родительском компоненте данные передаются через привязку:

<app-child [name]="parentName"></app-child>

В этом примере значение parentName, заданное в родительском компоненте, будет передано в дочерний компонент как параметр name.

Взаимодействие компонентов: события

Компоненты могут обмениваться данными не только через входные параметры, но и через выходные события. Для этого используется декоратор @Output() и объект EventEmitter, который позволяет компоненту посылать события в родительский компонент.

Пример создания события:

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-button',
  template: `<button (click)="sendEvent()">Нажми меня</button>`
})
export class ButtonComponent {
  @Output() clicked = new EventEmitter<void>();

  sendEvent() {
    this.clicked.emit();
  }
}

Родительский компонент обрабатывает событие, подписываясь на его вызов:

<app-button (clicked)="onButtonClick()"></app-button>

В родительском компоненте метод onButtonClick() будет вызван при клике на кнопку.

Компоненты и жизненный цикл

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

Пример использования интерфейса OnInit:

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

@Component({
  selector: 'app-lifecycle',
  template: `<p>Компонент инициализирован</p>`
})
export class LifecycleComponent implements OnInit {
  ngOnInit() {
    console.log('Компонент инициализирован');
  }
}

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

Использование компонентов в Angular имеет множество преимуществ:

  1. Инкапсуляция: Каждый компонент независим, что упрощает поддержку и тестирование.
  2. Переиспользуемость: Компоненты можно легко переносить в другие проекты или модули.
  3. Модульность: Благодаря разделению на компоненты и модули, приложение становится легче управляемым и масштабируемым.
  4. Тестируемость: Angular предлагает удобные инструменты для тестирования компонентов, позволяя проводить юнит-тестирование.

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

Оглавление