Angular Feature Modules

theme: smartblue

Angular Feature Modules

创建FModule:

ng generate module <module-name>

输出内容:

代码语言：javascript复制

app/
    <module-name>/
        <module-name>.module.ts

代码语言：javascript复制

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

代码语言：javascript复制

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

渲染FModule的组件模板

为FModule模块增加组件 ng generate component <module-name>/<ComponentName>

受Angular模块化的限制,在非A模块去使用A模块中的组件的情况,需要在A模块中进行导出。修改后的module01模块如下:

代码语言：javascript复制

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

angularjs 编程算法

0 人点赞