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

В Angular создание компонента — это процесс, который позволяет создавать повторно используемые элементы, обладающие собственной логикой и стилями. В данной статье мы разберём, как создать простой компонент displayBlock, который будет отображать блоки информации на веб-странице.

Шаг 1: Установка Angular CLI

Если у вас ещё не установлен Angular CLI, сначала установите его с помощью npm (Node Package Manager):

npm install -g @angular/cli

Шаг 2: Создание нового проекта

Создайте новый проект Angular, если он у вас ещё не создан:

ng new my-app
cd my-app

Шаг 3: Генерация компонента

Теперь создадим наш компонент displayBlock с помощью Angular CLI:

ng generate component displayBlock

Или можно использовать более короткую команду:

ng g c displayBlock

После выполнения этой команды Angular создаст папку display-block в директории src/app, а также создаст файлы компонента:

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

Шаг 4: Реализация логики компонента

Откройте файл display-block.component.ts и добавьте логику для компонента. Например, вы можете добавить входные данные, которые будут передаваться в компонент:

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

@Component({
  selector: 'app-display-block',
  templateUrl: './display-block.component.html',
  styleUrls: ['./display-block.component.css']
})
export class DisplayBlockComponent {
  @Input() title: string = 'Default Title';
  @Input() content: string = 'This is some default content.';
}

Здесь мы используем декоратор @Input(), чтобы определить, что свойство title и content могут передаваться в компонент из родительского компонента.

Шаг 5: Создание шаблона

Теперь откройте файл display-block.component.html, чтобы создать разметку для нашего компонента:

<div class="display-block">
  <h2>{{ title }}</h2>
  <p>{{ content }}</p>
</div>

Шаг 6: Добавление стилей

Перейдите к display-block.component.css и добавьте стили для вашего компонента:

.display-block {
  border: 1px solid #ccc;
  padding: 16px;
  margin: 10px 0;
  border-radius: 8px;
  background-color: #f9f9f9;
}

Шаг 7: Использование компонента

Теперь, когда компонент создан, вы можете использовать его в другом компоненте, например, в app.component.html. Добавьте следующий код:

<app-display-block title="Заголовок 1" content="Это содержимое блока 1"></app-display-block>
<app-display-block title="Заголовок 2" content="Это содержимое блока 2"></app-display-block>

Шаг 8: Запуск приложения

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

ng serve

Затем откройте браузер и перейдите по адресу http://localhost:4200. Вы должны увидеть ваши блоки с заголовками и содержимым.

Заключение

В этой статье мы рассмотрели, как создать и использовать простой компонент displayBlock в Angular. Вы узнали о создании компонентов, использовании входных данных и стилизации. Теперь вы можете создавать более сложные компоненты, используя аналогичный подход!