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

Question

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

Я пытаюсь понять Angular (иногда называемый Angular2+), затем я наткнулся на @Module

импорт

декларации

поставщики

после Угловой Быстрый Старт

632 3

angular angular-module

3 ответов:

Comments

Ничего не найдено.

Günter Zöchbauer · Accepted Answer · 2018-02-13 15:38:29

Угловое Понятия

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) imports

import ... from 'foo/bar' (где может решить к index.ts) предназначены для импорта машинописного текста. Они нужны всякий раз, когда вы используете идентификатор в файле typescript, который объявлен в другом файле typescript.

Угловое по @NgModule()imports и машинопись import are совершенно разные понятия.

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

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

Godfather · Accepted Answer · 2016-09-06 09:43:58

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

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

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

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

SanSolo · Accepted Answer · 2018-04-18 19:48:32

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

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