В чем разница между объявлениями, поставщиками и импортом в NgModule?

Ответ 1

Angular понятия

• imports делает экспортированные объявления других модулей доступными в текущем модуле
• declarations должен сделать директивы (включая компоненты и pipes) от текущего модуля доступными для других директив в текущем модуле. Селекторы директив, компонентов или каналов сопоставляются только с 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' (который может разрешать в index.ts) предназначены для импорта TypeScript. Они нужны вам всякий раз, когда вы используете идентификатор в файле машинописи, который объявлен в другом файле машинописи.

Angular @NgModule() imports и TypeScript import - это совершенно разные понятия.

См. также jDriven - синтаксис импорта TypeScript и ES6

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

Ответ 2

imports: используется для импорта поддерживающих модулей, таких как FormsModule, RouterModule, CommonModule или любой другой настраиваемый функциональный модуль.

declarations: используется для объявления компонентов, директив, труб, принадлежащих текущему модулю. Все внутри деклараций знают друг друга. Например, если у нас есть компонент, скажем UsernameComponent, который отображает список имен пользователей, и у нас также есть канал, скажем toupperPipe, который преобразует строку в верхнюю буквенную строку, Теперь, если мы хотим показать имена пользователей в прописных буквах в нашем UsernameComponent, мы можем использовать toupperPipe, который мы создали ранее, но как UsernameComponent знает, что существует toupperPipe, и как мы можем его использовать и использовать, здесь появляются объявления, мы можем объявить UsernameComponent и toupperPipe.

Providers: используется для ввода услуг, требуемых компонентами, директивами, каналами в нашем модуле.

Подробнее читайте здесь: https://angular.io/docs/ts/latest/guide/ngmodule.html

Ответ 3

Компоненты объявлены, Модули импортированы, и Услуги предоставляются. Пример, с которым я работаю:

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 { }

Ответ 4

Угловые конструкции @NgModule:

1. import { x } from 'y'; : Это стандартный синтаксис машинописи (синтаксис модуля ES2015/ES6) для импорта кода из других файлов. Это не специфично для Angular. Кроме того, это технически не является частью модуля, просто необходимо получить необходимый код в рамках этого файла.
2. imports: [FormsModule]: здесь вы импортируете другие модули. Например, мы импортируем FormsModule в следующем примере. Теперь мы можем использовать функциональные возможности, которые FormsModule предлагает в этом модуле.
3. declarations: [OnlineHeaderComponent, ReCaptcha2Directive]: здесь вы declarations: [OnlineHeaderComponent, ReCaptcha2Directive] свои компоненты, директивы и каналы. После того как вы заявили здесь, вы можете использовать их во всем модуле. Например, теперь мы можем использовать OnlineHeaderComponent в представлении AppComponent (html файл). Angular знает, где найти этот 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 { }

Ответ 5

Добавление быстрой шпаргалки, которая может помочь после длительного перерыва с Angular:

ЗАЯВЛЕНИЯ

Пример:

declarations: [AppComponent]

Что мы можем здесь ввести? Компоненты, pipes, директивы

ИМПОРТ

Пример:

imports: [BrowserModule, AppRoutingModule]

Что мы можем ввести здесь? другие модули

ПОСТАВЩИКИ

Пример:

providers: [UserService]

Что мы можем здесь ввести? услуги

Bootstrap

Пример:

bootstrap: [AppComponent]

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

ВХОДНЫЕ КОМПОНЕНТЫ

Пример:

entryComponents: [PopupComponent]

Что мы можем здесь вставить? динамически генерируемые компоненты (например, с помощью ViewContainerRef.createComponent())

ЭКСПОРТ

Пример:

export: [TextDirective, PopupComponent, BrowserModule]

Что мы можем здесь вставить? компоненты, директивы, модули или каналы, к которым мы хотели бы получить доступ к ним в другом модуле (после импорта этого модуля)