大佬教程收集整理的这篇文章主要介绍了Angular2文档学习的知识点摘要——Angular模块（NgModule），大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
NgIf是来自@angular/common的CommonModule中声明的。 CommonModule提供了很多应用程序中常用的指令，包括NgIf和NgFor等。 BrowserModule导入了CommonModule并且重新导出了它。最终的效果是：只要导入BrowserModule就自动获得了CommonModule中的指令。
@H_616_63@ 有些熟悉的Angular指令并不属于CommonModule。例如，NgModel和RouterLink分别属于Angular的FormsModule模块和RouterModule模块。在使用那些指令之前，我们也必须导入那些模块。
@H_616_63@注：永远不要再次声明属于其它模块的类。
@NgModule装饰器及其元数据的类，就像根模块一样。特性模块的元数据和根模块的元数据的属性是一样的。 BrowserModule提供了启动和运行浏览器应用的那些基本的服务提供商。 BrowserModule还从@angular/common中重新导出了CommonModule，这意味着AppModule中的组件也同样可以访问那些每个应用都需要的Angular指令，如NgIf和NgFor。 BrowserModule。特性模块和惰性加载模块应该改成导入CommonModule。它们不需要重新初始化全应用级的提供商。 BrowserModule，Angular就会抛出一个错误。 CommonModule可以让它用在任何目标平台，不仅是浏览器。那些跨平台库的作者应该喜欢这种方式的。
app/app-routIng.@H_830_200@module.ts
COPY CODE
import { NgModule } from '@angular/core';
import { Routes,RouterModule } from '@angular/router';
export const routes: Routes = [
{ path: '',redirectTo: 'contact',pathMatch: 'full'},{ path: 'crisis',loadChildren: 'app/crisis/crisis.module#CrisisModule' },{ path: 'heroes',loadChildren: 'app/hero/hero.module#HeroModule' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutIngModule {}
@H_616_63@ 其中，contact路由并不是在这里定义的。对于带有路由组件的特性模块，其标准做法就是让它们定义自己的路由。如，ContactModule特性模块，在其特性区中定义自己的路由文件contact.routIng.ts。 { path: 'crisis',loadChildren: 'app/crisis/crisis.module#CrisisModule' },{ path: 'heroes',loadChildren: 'app/hero/hero.module#HeroModule' }
@H_616_63@ 惰性加载模块的位置是字符串而不是类型。在本应用中该字符串同时标记出了模块文件和模块类，两者用#分隔开。 RouterModule类的forRoot静态方法和提供的配置，被添加到imports数组中，提供该模块的路由信息。
@NgModule({
imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutIngModule {}
@H_616_63@ 该方法返回的AppRoutIngModule类是一个路由模块，它同时包含了RouterModule指令和用来生成配置好的Router的依赖注入提供商。 @NgModule({
imports: [RouterModule.forChild([
{ path: 'contact',component: ContactComponent }
])],exports: [RouterModule]
})
export class ContactRoutIngModule {}
@H_616_63@ 这次我们要把路由列表传给RouterModule的forChild方法。 该方法会为特性模块生成另一种对象。 RouterModule.forChild。 @NgModule({
imports: [ CommonModule,FormsModule,ContactRoutIngModule ],declarations: [ ContactComponent,HighlightDirective,AwesomePipe ],providers: [ Contactservice ]
})
export class ContactModule { }
@H_616_63@ 现在我们通过路由器导航到ContactComponent，所以也就没有理由公开它了。它也不再需要选择器 (SELEctor)。 也没有模板会再引用ContactComponent。它从 AppComponent 模板中彻底消失了。
@NgModule({
imports: [ CommonModule,HeroRoutIngModule ],declarations: [
HeroComponent,HeroDetailComponent,HeroListComponent,HighlightDirective
]
})
export class HeroModule { }
@H_338_404@共享模块
@H_616_63@ 在多个特性模块中，可能存在公共的组件、指令和管道。我们可以添加SharedModule来存放这些公共组件、指令和管道，并且共享给那些需要它们的模块。 import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AwesomePipe } from './awesome.pipe';
import { HighlightDirective } from './highlight.directive';
@NgModule({
imports: [ CommonModule ],declarations: [ AwesomePipe,HighlightDirective ],exports: [ AwesomePipe,CommonModule,FormsModule ]
})
export class SharedModule { }
@H_616_63@值得注意的有： CommonModule的NgIf和NgFor指令，并且还通过来自FormsModule的[(ngModel)]指令绑定到了组件的属性。那些声明这些组件的模块将不得不同时导入CommonModule、FormsModule和SharedModule。 SharedModule重新导出CommonModule和FormsModule模块，我们可以消除这种重复。于是导入SharedModule的模块也同时免费获得了CommonModule和FormsModule。 import {
ModuleWithProviders,NgModule,Optional,SkipSelf } from '@angular/core';
import { CommonModule } from '@angular/common';
import { titleComponent } from './title.component';
import { Userservice } from './user.service';
@NgModule({
imports: [ CommonModule ],declarations: [ titleComponent ],exports: [ titleComponent ],providers: [ Userservice ]
})
export class CoreModule {
}
@H_616_63@ 因此我们建议把这些一次性的类收集到CoreModule中，并且隐藏它们的实现细节。 简化之后的根模块AppModule导入CoreModule来获取其能力。记住，根模块是整个应用的总指挥，不应该插手过多细节。
constructor(@Optional() config: UserserviceConfig) { if (config) { this._userName = config.userName; }
}
@H_616_63@这里的CoreModule.forRoot接收UserserviceConfig对象： static forRoot(config: UserserviceConfig): ModuleWithProviders { return { ngModule: CoreModule,providers: [ {provide: UserserviceConfig,useValue: config } ] };
}
@H_616_63@最后，我们在AppModule的imports列表中调用它。 imports: [
BrowserModule,ContactModule,CoreModule.forRoot({userName: 'Miss Marple'}),AppRoutIngModule
],
@H_616_63@注：只在应用的根模块AppModule中调用forRoot。 如果在其它模块（特别是惰性加载模块）中调用它则违反了设计意图，并会导致运行时错误。
@H_772_581@禁止重复导入CoreModule
@H_616_63@ 只有根模块AppModule才能导入CoreModule。 如果惰性加载模块导入了它，就会出问题。 constructor (@Optional() @SkipSelf() parentModule: CoreModulE) { if (parentModulE) { throw new Error( 'CoreModule is already loaded. Import it in the AppModule only'); }
}
以上是大佬教程为你收集整理的Angular2文档学习的知识点摘要——Angular模块（NgModule）全部内容，希望文章能够帮你解决Angular2文档学习的知识点摘要——Angular模块（NgModule）所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。