Angular 2
Модули
Поиск…
Вступление
Угловые модули - это контейнеры для разных частей вашего приложения.
У вас могут быть вложенные модули, ваш 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