Angular Feature Modules

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

输出内容说明:

1. NgModule的用法和作用跟组件中的一致为了使用@NgModule装饰器来对Module类进行装饰.
2. CommonModule的作用是提供了常用的指令如:ngIf,ngFor等.

将FModule导入AppModule

@NgModule({
  imports: [
    Module01Module, // 添加FModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

渲染FModule的组件模板

1. 为FModule模块增加组件 ng generate component <module-name>/<ComponentName>
2. 受Angular模块化的限制,在非A模块去使用A模块中的组件的情况,需要在A模块中进行导出。修改后的module01模块如下:

   @NgModule({
   declarations: [
    Comp1Component
   ],
   imports: [
    CommonModule
   ],
   exports: [
    Comp1Component, // 导出组件
   ]
   })
   export class Module01Module { }