Как вручную создать независимый компонент?

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

Шаг 1: Создание нового компонента

Первый шаг заключается в создании файла, который будет представлять ваш компонент. Например, создадим компонент my-standalone-component.

Создайте файл my-standalone-component.ts и добавьте в него следующий код:

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

@Component({
  selector: 'app-my-standalone-component',
  template: `
    <h1>Мой независимый компонент</h1>
    <p>Это простой пример независимого компонента в Angular.</p>
  `,
  standalone: true // Установка параметра standalone в true делает компонент независимым
})
export class MyStandaloneComponent {}

В этом коде мы объявляем компонент с помощью декоратора @Component. Обратите внимание на параметр standalone: true, который указывает, что этот компонент является независимым.

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

После создания компонента вы можете использовать его в любом месте вашего приложения. Для этого необходимо импортировать его в модуль, в котором он будет использоваться. Например, если вы хотите использовать его в основном компоненте приложения, сделайте следующую настройку.

Откройте файл app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyStandaloneComponent } from './my-standalone-component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MyStandaloneComponent // Импортируем наш независимый компонент
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

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

<h1>Добро пожаловать в моё приложение!</h1>
<app-my-standalone-component></app-my-standalone-component>

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

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

ng serve

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

Заключение

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