Angular — это платформа и фреймворк для создания одностраничных приложений с использованием HTML и TypeScript. Один из основных концептов, на которых основан Angular, — это компоненты. В этом ответе мы подробно рассмотрим, как использовать компоненты в Angular.

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

Компоненты в Angular представляют собой строительные блоки приложения. Каждый компонент отвечает за свою часть пользовательского интерфейса и включает в себя:

• Шаблон — HTML-код, который описывает, как должен выглядеть интерфейс.
• Класс — TypeScript-класс, который содержит логику компонента.
• Метаданные — информация о компоненте, такая как селектор, шаблон и стили.

Создание компонента

Чтобы создать новый компонент в Angular, можно воспользоваться Angular CLI. Откройте терминал и выполните следующую команду:

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

Эта команда создаст новую папку с именем вашего компонента, которая будет содержать следующие файлы:

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

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

Рассмотрим структуру созданного компонента на примере файла имя-компонента.component.ts:

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

@Component({
  selector: 'app-имя-компонента',
  templateUrl: './имя-компонента.component.html',
  styleUrls: ['./имя-компонента.component.css']
})
export class ИмяКомпонентаComponent {
  // Логика компонента
}

В этом примере:

• selector — это имя тега, который мы будем использовать в HTML для добавления нашего компонента.
• templateUrl — путь к файлу шаблона.
• styleUrls — массив, содержащий пути к файлам стилей компонента.

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

Чтобы использовать созданный компонент в другом компоненте, необходимо добавить его в модуль. Откройте файл app.module.ts и импортируйте ваш компонент:

import { ИмяКомпонентаComponent } from './имя-компонента/имя-компонента.component';

@NgModule({
  declarations: [
    ИмяКомпонентаComponent,
    // другие компоненты
  ],
  imports: [
    // модули
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

После этого вы можете использовать компонент в HTML, добавив его селектор:

<app-имя-компонента></app-имя-компонента>

Данные в компонентах

Компоненты могут принимать данные через входные параметры (input properties). Для этого используется декоратор @Input(). Например:

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

@Component({
  selector: 'app-имя-компонента',
  template: '<p>Привет, {{name}}!</p>'
})
export class ИмяКомпонентаComponent {
  @Input() name: string;
}

Теперь вы можете передавать значение для name из родительского компонента:

<app-имя-компонента [name]="'Мир'"></app-имя-компонента>

События в компонентах

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

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

@Component({
  selector: 'app-имя-компонента',
  template: '<button (click)="notify()">Уведомить родителя</button>'
})
export class ИмяКомпонентаComponent {
  @Output() notifyParent = new EventEmitter();

  notify() {
    this.notifyParent.emit('Сообщение от дочернего компонента');
  }
}

В родительском компоненте вы можете подписаться на это событие:

<app-имя-компонента (notifyParent)="onNotify($event)"></app-имя-компонента>

И определить метод onNotify для обработки события:

onNotify(message: string) {
  console.log(message);
}

Заключение

В этой статье мы рассмотрели, что такое компоненты в Angular и как их использовать. Мы научились создавать компоненты, добавлять их в модуль, передавать данные и обрабатывать события. Компоненты — это мощный инструмент для построения модульных и переиспользуемых частей интерфейса.

Если у вас есть дополнительные вопросы или вы хотите узнать больше о других аспектах Angular, не стесняйтесь спрашивать!