在NgModule中，声明、提供者和导入之间有什么区别?

小开

最佳答案

角的概念

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'(即可以解析为index.ts)用于TypeScript导入。当你在一个typescript文件中使用一个在另一个typescript文件中声明的标识符时，你就需要这些标识符。

Angular的@NgModule() imports和TypeScript的import都是完全不同的概念。

另见jDriven - TypeScript和ES6导入语法

它们中的大多数实际上是TypeScript也使用的普通ECMAScript 2015 (ES6)模块语法。

小开

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

小开

Angular `@NgModule`构造:

import { x } from 'y';:这是从其他文件导入代码的标准typescript语法(ES2015/ES6模块语法)。这不是Angular特有的。此外，从技术上讲，这不是模块的一部分，只是需要在这个文件的范围内获得所需的代码。
imports: [FormsModule]:你在这里导入其他模块。例如，我们在下面的例子中导入FormsModule。现在我们可以在整个模块中使用FormsModule必须提供的功能。
declarations: [OnlineHeaderComponent, ReCaptcha2Directive]:你把你的组件，指令和管道放在这里。在这里声明之后，您现在可以在整个模块中使用它们。例如，我们现在可以在AppComponent视图(html文件)中使用OnlineHeaderComponent。Angular知道在哪里找到这个OnlineHeaderComponent，因为它是在@NgModule中声明的。
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: [AppComponent]

我们可以在这里注入什么?此模块将生成的主组件(组件树的顶部父节点)

输入组件

例子:

entryComponents: [PopupComponent]

我们可以在这里注入什么?动态生成的组件(例如通过使用ViewContainerRef.createComponent())

出口

例子:

export: [TextDirective, PopupComponent, BrowserModule]

我们可以在这里注入什么?组件、指令、模块或管道，我们希望在另一个模块中访问它们(导入此模块后)

小开

声明

出口

进口

供应商

引导

在NgModule中，声明、提供者和导入之间有什么区别?

Angular @NgModule构造:

示例模块:

声明

进口

供应商

引导

输入组件

出口

Angular `@NgModule`构造: