角度概念
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'
(may resolve to an index.ts
)用于TypeScript导入。只要在另一个打字稿文件中声明的打字稿文件中使用标识符,就需要这些。
Angular的@NgModule()
imports
和TypeScript import
是完全不同的概念。
另见jDriven - TypeScript and ES6 import syntax
其中大多数实际上是TypeScript使用的简单的ECMAScript 2015(ES6)模块语法。
imports
:用于导入支持模块,如FormsModule,RouterModule,CommonModule或任何其他定制的功能模块。
declarations
:用于声明属于当前模块的组件,指令和管道。声明中的所有内容都相互了解。例如,如果我们有一个组件,比如UsernameComponent,它显示用户名列表,我们也有一个管道,比如toupperPipe,它将字符串转换为大写字母字符串。现在如果我们想在UsernameComponent中以大写字母显示用户名,我们可以使用之前创建的toupperPipe但是UsernameComponent如何知道toupperPipe存在以及我们如何访问和使用它,这里是声明,我们可以声明UsernameComponent和toupperPipe。
Providers
:用于注入模块中组件,指令,管道所需的服务。
在这里详细阅读:https://angular.io/docs/ts/latest/guide/ngmodule.html
声明组件,导入模块,并提供服务。我正在使用的一个例子:
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
构造:import { x } from 'y';
:这是用于从其他文件导入代码的标准typescript语法(ES2015/ES6
模块语法)。这不是Angular特有的。此外,这在技术上不是模块的一部分,只需要在此文件的范围内获取所需的代码。imports: [FormsModule]
:你在这里导入其他模块。例如,我们在下面的示例中导入FormsModule
。现在我们可以使用FormsModule在整个模块中提供的功能。declarations: [OnlineHeaderComponent, ReCaptcha2Directive]
:你把你的组件,指令和管道放在这里。一旦在此声明,您现在可以在整个模块中使用它们。例如,我们现在可以在OnlineHeaderComponent
视图(html文件)中使用AppComponent
。 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 { }