Что такое общий модуль в Angular?

Общие модули (shared modules) в Angular играют важную роль в упрощении и организации кода, особенно в крупных приложениях. Они позволяют вам повторно использовать компоненты, директивы и пайпы в различных других модулях вашего приложения, избегая дублирования кода и улучшая поддерживаемость.

Основные понятия

1. Модуль: В Angular модуль — это класс, который помечается декоратором @NgModule. Он объединяет связанные элементы приложения, такие как компоненты, сервисы и другие модули.
2. Общий модуль: Это модуль, который содержит функциональность, которой могут пользоваться другие модули. Например, вы можете создать общий модуль для компонентов, которые используются на нескольких страницах вашего приложения.

Зачем нужен общий модуль?

• Избежание дублирования: Если у вас есть компоненты, которые используются в нескольких местах, вы можете поместить их в общий модуль и импортировать этот модуль в другие.
• Упрощение структуры приложения: Создание общих модулей помогает вам организовать ваш код, делая его более понятным и поддерживаемым.

Как создать общий модуль?

Рассмотрим простой пример создания общего модуля.

1. Создайте новый модуль:

ng generate module shared

2. Добавьте компоненты, пайпы и директивы в общий модуль. Например, создадим простой компонент в общем модуле:

ng generate component shared/my-button

3. Обновите код общего модуля:

// shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyButtonComponent } from './my-button/my-button.component';

@NgModule({
  declarations: [MyButtonComponent],
  imports: [
    CommonModule
  ],
  exports: [MyButtonComponent] // Экспортируем компонент
})
export class SharedModule { }

4. Используйте общий модуль в другом модуле:

Например, в модуле AppModule:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    SharedModule // Импортируем общий модуль
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

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

<!-- app.component.html -->
<app-my-button></app-my-button>

Заключение

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