NgModule 中的声明、提供者和导入之间有什么区别?
What is the difference between declarations, providers, and import in NgModule?
我试图理解Angular(有时称为Angular2+),然后我遇到了@Module
:
进口
声明
提供商
Angular 概念
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'
()用于 TypeScript 导入。每当您在另一个打字稿文件中声明的打字稿文件中使用标识符时,您都需要这些。
Angular的@NgModule()
imports
和TypeScriptimport
是完全不同的概念。
另见 jDriven - TypeScript and ES6 import syntax
Most of them are actually plain ECMAScript 2015 (ES6) module syntax that TypeScript uses as well.
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';
:这是用于从其他文件导入代码的标准打字稿语法(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 { }
添加一个快速作弊 sheet 可能会在与 Angular 长期中断后有所帮助:
声明
示例:
declarations: [AppComponent]
我们可以在这里注入什么?组件、管道、指令
进口
示例:
imports: [BrowserModule, AppRoutingModule]
这里可以注入什么?其他模块
提供商
示例:
providers: [UserService]
这里可以注入什么?服务
BOOTSTRAP
示例:
bootstrap: [AppComponent]
我们可以在这里注入什么?这个模块将生成的主要组件(组件树的顶级父节点)
条目组件
示例:
entryComponents: [PopupComponent]
我们可以在这里注入什么? 动态生成的组件(例如使用 ViewContainerRef.createComponent())
出口
示例:
export: [TextDirective, PopupComponent, BrowserModule]
我们可以在这里注入什么? 我们希望在另一个模块中访问它们的组件、指令、模块或管道(导入此模块后)
- 声明:
属性 讲述组件、指令
和属于该模块的管道。
- 出口:
应该可见的声明的子集
可用于其他 NgModule 的组件模板。
- 进口:
其他需要导出 类 的模块
在此 NgModule 中声明的组件模板。
- 提供商:
此 NgModule 贡献的服务的创建者
全球服务集合;他们变得无障碍
应用程序的一部分。 (您也可以在组件中指定提供者
级别,这通常是首选。)
- bootstrap:
主应用程序视图,称为根组件,
它承载所有其他应用程序视图。只有根 NgModule 应该设置
bootstrap 属性.
我试图理解Angular(有时称为Angular2+),然后我遇到了@Module
:
进口
声明
提供商
Angular 概念
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'
(
Angular的@NgModule()
imports
和TypeScriptimport
是完全不同的概念。
另见 jDriven - TypeScript and ES6 import syntax
Most of them are actually plain ECMAScript 2015 (ES6) module syntax that TypeScript uses as well.
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';
:这是用于从其他文件导入代码的标准打字稿语法(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 { }
添加一个快速作弊 sheet 可能会在与 Angular 长期中断后有所帮助:
声明
示例:
declarations: [AppComponent]
我们可以在这里注入什么?组件、管道、指令
进口
示例:
imports: [BrowserModule, AppRoutingModule]
这里可以注入什么?其他模块
提供商
示例:
providers: [UserService]
这里可以注入什么?服务
BOOTSTRAP
示例:
bootstrap: [AppComponent]
我们可以在这里注入什么?这个模块将生成的主要组件(组件树的顶级父节点)
条目组件
示例:
entryComponents: [PopupComponent]
我们可以在这里注入什么? 动态生成的组件(例如使用 ViewContainerRef.createComponent())
出口
示例:
export: [TextDirective, PopupComponent, BrowserModule]
我们可以在这里注入什么? 我们希望在另一个模块中访问它们的组件、指令、模块或管道(导入此模块后)
- 声明: 属性 讲述组件、指令 和属于该模块的管道。
- 出口: 应该可见的声明的子集 可用于其他 NgModule 的组件模板。
- 进口: 其他需要导出 类 的模块 在此 NgModule 中声明的组件模板。
- 提供商: 此 NgModule 贡献的服务的创建者 全球服务集合;他们变得无障碍 应用程序的一部分。 (您也可以在组件中指定提供者 级别,这通常是首选。)
- bootstrap: 主应用程序视图,称为根组件, 它承载所有其他应用程序视图。只有根 NgModule 应该设置 bootstrap 属性.