Angular Feature Modules
创建FModule:
ng generate module <module-name>
输出内容:
app/ <module-name>/ <module-name>.module.ts 复制代码
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; @NgModule({ declarations: [], imports: [ CommonModule ] }) export class Module01Module { }
输出内容说明:
- NgModule的用法和作用跟组件中的一致为了使用@NgModule装饰器来对Module类进行装饰.
- CommonModule的作用是提供了常用的指令如:ngIf,ngFor等.
将FModule导入AppModule
@NgModule({ imports: [ Module01Module, // 添加FModule ], bootstrap: [AppComponent] }) export class AppModule { }
渲染FModule的组件模板
- 为FModule模块增加组件
ng generate component <module-name>/<ComponentName> - 受Angular模块化的限制,在非A模块去使用A模块中的组件的情况,需要在A模块中进行导出。修改后的module01模块如下:
@NgModule({ declarations: [ Comp1Component ], imports: [ CommonModule ], exports: [ Comp1Component, // 导出组件 ] }) export class Module01Module { }
