Яка різниця між деклараціями, постачальниками та імпортом у NgModule?

Я намагаюся зрозуміти Angular (іноді його називають Angular2 +), тоді я натрапив на @Module:

1. Імпорт

2. Декларації

3. Постачальники

Слідом за кутовим швидким початком

Кутові поняття

• imports робить експортовані декларації інших модулів доступними в поточному модулі
• declarationsповинні зробити директиви (включаючи компоненти та труби) з поточного модуля доступними для інших директив у поточному модулі. Селектори директив, компонентів або труб узгоджуються лише з HTML, якщо вони оголошені або імпортовані.
• providersповинні зробити послуги та значення відомими DI (введення залежності). Вони додаються в кореневу область і вводяться до інших служб або директив, які мають їх залежність.

Особливий випадок - providersце ледачі завантажені модулі, які отримують власну дочірню ін'єкцію. providersмодуля з ледачим завантаженням за замовчуванням надається лише цьому модулю, який завантажений ледачим (не для всієї програми, як це стосується інших модулів).

Детальніше про модулі див. Також на https://angular.io/docs/ts/latest/guide/ngmodule.html

• exportsробить компоненти, директиви та труби доступними в модулях, до яких додається цей модуль imports. exportsможе також використовуватися для реекспорту модулів, таких як CommonModule та FormsModule, що часто робиться у спільних модулях.

• entryComponentsреєструє компоненти для офлайн-компіляції, щоб їх можна було використовувати ViewContainerRef.createComponent(). Компоненти, що використовуються в конфігураціях маршрутизатора, додаються неявно.

Імпортує TypeScript (ES2015)

import ... from 'foo/bar'(що може відповідати anindex.ts ) призначені для імпорту TypeScript. Вони потрібні вам щоразу, коли ви використовуєте ідентифікатор у файлі машинопису, який оголошується в іншому файлі.

Angular's @NgModule() importsі TypeScript import- абсолютно різні поняття .

Див. Також синтаксис імпорту jDriven - TypeScript та ES6

Більшість з них насправді є простим синтаксисом модулів ECMAScript 2015 (ES6), який використовує TypeScript.

imports використовуються для імпорту підтримуючих модулів, таких як FormsModule, RouterModule, CommonModule або будь-який інший на замовлення функціональний модуль.

declarationsвикористовуються для оголошення компонентів, директив, труб, що належать до поточного модуля. Усі всередині декларацій знають один одного. Наприклад, якщо у нас є компонент, скажімо UsernameComponent, який відображає список імен користувачів, а у нас також є труба, скажімо, toupperPipe, яка перетворює рядок у верхній регістр літер. Тепер, якщо ми хочемо показувати імена користувачів великими літерами в нашому UsernameComponent, тоді ми можемо використовувати toupperPipe, який ми створили раніше, але питання полягає в тому, як UsernameComponent знає, що toupperPipe існує і як він може отримати доступ та використовувати це. Ось приходять декларації, ми можемо оголосити UsernameComponent і toupperPipe.

Providers використовуються для введення послуг, необхідних компонентам, директивам, трубам в модулі.

Компоненти оголошуються, модулі імпортуються та надаються Послуги. Приклад, з яким я працюю:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import {FormsModule} from '@angular/forms';
import { UserComponent } from './components/user/user.component';
import { StateService } from './services/state.service';    

@NgModule({
  declarations: [
    AppComponent,
    UserComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [ StateService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Кутові @NgModuleконструкції:

1. import { x } from 'y';: Це стандартний синтаксис машинопису (синтаксис ES2015/ES6модуля) для імпорту коду з інших файлів. Це не кутовий характер . Також це технічно не є частиною модуля, просто необхідно отримати необхідний код у межах цього файлу.
2. imports: [FormsModule]: Ви імпортуєте сюди інші модулі. Наприклад, ми імпортуємо FormsModuleв наведеному нижче прикладі. Тепер ми можемо використовувати функціонал, який може запропонувати FormsModule протягом цього модуля.
3. declarations: [OnlineHeaderComponent, ReCaptcha2Directive]: Ви розміщуєте тут свої компоненти, директиви та труби. Після оголошення тут ви тепер можете використовувати їх у всьому модулі. Наприклад, тепер ми можемо використовувати OnlineHeaderComponentв AppComponentпредставленні (html-файл). Кутовий знає, де це знайти, OnlineHeaderComponentтому що це оголошено в @NgModule.
4. providers: [RegisterService]: Тут визначені наші послуги цього конкретного модуля. Ви можете користуватися послугами у своїх компонентах, вводячи ін'єкцію із залежністю.

Приклад модуля:

// Angular
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

// Components
import { AppComponent } from './app.component';
import { OfflineHeaderComponent } from './offline/offline-header/offline-header.component';
import { OnlineHeaderComponent } from './online/online-header/online-header.component';

// Services
import { RegisterService } from './services/register.service';

// Directives
import { ReCaptcha2Directive } from './directives/re-captcha2.directive';

@NgModule({
  declarations: [
    OfflineHeaderComponent,,
    OnlineHeaderComponent,
    ReCaptcha2Directive,
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
  ],
  providers: [
    RegisterService,
  ],
  entryComponents: [
    ChangePasswordComponent,
    TestamentComponent,
    FriendsListComponent,
    TravelConfirmComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Додавання швидкої шпаргалки, яка може допомогти після тривалої перерви з Angular:

ДЕКЛАРАЦІЇ

Приклад:

declarations: [AppComponent]

Що ми можемо тут ввести? Компоненти, труби, директиви

ІМПОРТ

Приклад:

imports: [BrowserModule, AppRoutingModule]

Що ми можемо тут ввести? інші модулі

ПОСТАВЧИКИ

Приклад:

providers: [UserService]

Що ми можемо тут ввести? послуги

BOOTSTRAP

Приклад:

bootstrap: [AppComponent]

Що ми можемо тут ввести? основний компонент, який буде генерований цим модулем (верхній батьківський вузол для компонентного дерева)

ВХІД КОМПОНЕНТИ

Приклад:

entryComponents: [PopupComponent]

Що ми можемо тут ввести? динамічно генеровані компоненти (наприклад, за допомогою ViewContainerRef.createComponent ())

ЕКСПОРТ

Приклад:

export: [TextDirective, PopupComponent, BrowserModule]

Що ми можемо тут ввести? компоненти, директиви, модулі або труби, до яких ми хотіли б мати доступ до них в іншому модулі (після імпорту цього модуля)

1. декларації : ця властивість розповідає про компоненти, директиви та труби, що належать до цього модуля.
2. Експорт : Підмножина декларацій, які мають бути видимими та корисними у шаблонах компонентів інших NgModules.
3. імпорт : інші модулі, експортовані класи яких потрібні шаблонам компонентів, задекларованим у цьому NgModule.
4. провайдери : Творці послуг, які цей NgModule сприяє глобальній колекції послуг; вони стають доступними у всіх частинах програми. (Ви також можете вказати провайдерів на рівні компонентів, що часто бажано.)
5. bootstrap : основний вигляд програми, який називається кореневим компонентом, який розміщує всі інші представлення програм. Тільки кореневий NgModule повинен встановлювати властивість завантажувальної програми.