Angular Feature Modules
2023-02-18 16:41:31 时间
theme: smartblue
Angular Feature Modules
创建FModule:
ng generate module <module-name>
输出内容:
app/
<module-name>/
<module-name>.module.tsimport { 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 { }