Поиск…


Вступление

Угловые модули - это контейнеры для разных частей вашего приложения.

У вас могут быть вложенные модули, ваш app.module уже app.module другие модули, такие как BrowserModule и вы можете добавить RouterModule и так далее.

Простой модуль

Модуль - это класс с декоратором @NgModule . Чтобы создать модуль, мы добавляем @NgModule передавая некоторые параметры:

  • bootstrap : компонент, который будет корнем вашего приложения. Эта конфигурация присутствует только в корневом модуле
  • declarations : ресурсы, declarations модулем. Когда вы добавляете новый компонент, вам нужно обновлять декларации ( ng generate component делает это автоматически)
  • exports : Ресурсы экспорта модулей, которые могут использоваться в других модулях
  • imports : ресурсы, которые модуль использует из других модулей (принимаются только классы модулей)
  • providers : ресурсы, которые могут быть введены (di) в компонент

Простой пример:

import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
@NgModule({
  bootstrap: [AppComponent]
  declarations: [AppComponent],
  exports: [],
  imports: [BrowserModule],
  providers: [],
})
export class AppModule { }

Вложенные модули

Модули могут быть вложенными, используя imports параметра @NgModule декоратора.

Мы можем создать core.module в нашем приложении, которое будет содержать общие вещи, такие как ReservePipe (канал, который обращает строку) и связывает их в этом модуле:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ReversePipe } from '../reverse.pipe';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [ReversePipe], // export things to be imported in another module
  declarations: [ReversePipe],
})
export class CoreModule { }

Затем в app.module :

import { CoreModule } from 'app/core/core.module';

@NgModule({
  declarations: [...], // ReversePipe is available without declaring here
                       // because CoreModule exports it
  imports: [
    CoreModule,        // import things from CoreModule
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow