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

Как создать функциональный модуль

Вы можете создать функциональный модуль, используя команду CLI:

ng generate module my-feature

Это создаст файл модуля my-feature.module.ts. Давайте посмотрим на него:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { MyFeatureComponent } from './my-feature.component';

@NgModule({
  declarations: [MyFeatureComponent],
  imports: [
    CommonModule
  ],
  exports: [MyFeatureComponent]
})
export class MyFeatureModule { }

Что здесь происходит

Импорт NgModule: Это основной декоратор для определения модуля в Angular. Он берет метаданные о модуле и делает его рабочим в Angular.

Импорт CommonModule: Этот модуль предоставляет основные директивы Angular, такие как ngIf и ngFor, которые необходимы для работы с шаблонами. Поскольку функциональные модули часто содержат пользовательские компоненты, импорт CommonModule является обязательным для использования этих директив.

Декларация компонентов: В данном случае мы объявляем MyFeatureComponent. Это означает, что этот компонент связан с функциональным модулем и может быть использован в его шаблонах.

Экспорт компонентов: Мы экспортируем MyFeatureComponent, чтобы другие модули могли использовать его. Это полезно, если вы хотите, чтобы компоненты вашего функционального модуля были доступны в других частях приложения.

Дополнительные импорты

В зависимости от вашей функциональности, вы можете также импортировать другие модули. Например:

Если вы используете маршрутизацию в вашем модуле, вам нужно импортировать RouterModule:

import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes) // routes - это массив маршрутов вашего модуля
  ],
})
export class MyFeatureModule { }

Если у вас есть HTTP-запросы, вы можете импортировать HttpClientModule:

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    CommonModule,
    HttpClientModule
  ],
})
export class MyFeatureModule { }

Заключение

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

Предыдущий вопрос

Что такое гидратация в контексте Angular?

Следующий вопрос

Что такое свойство index в директиве ngFor?

Содержание:

Как создать функциональный модуль

Дополнительные импорты

Заключение

Редактировать