angular 分离app.module.ts代码

最新推荐文章于 2025-01-07 10:31:20 发布

weixin_34129696

最新推荐文章于 2025-01-07 10:31:20 发布

阅读量186

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cxd1008/p/7765911.html

本文介绍如何在大型Angular项目中实现模块化，通过分离app.module.ts中的导入代码来提高项目的可维护性和组织性。具体展示了HeroModule的创建过程，并强调了模块内部组件声明的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当项目足够大时，app.module.ts 里import代码太多了，所以要分离。

只需要把单独模块中的引用分开写就好了：

 1 import { NgModule } from '@angular/core';
 2 import { CommonModule } from "@angular/common";//<--NgIf、NgFor等指令
 3 import { FormsModule } from "@angular/forms"; //<-- NgModel lives here 双向绑定
 4 import { HeroesComponent } from './heroes.component'
 5 import { HeroDetailComponent } from './hero-detail.component';
 6 
 7 
 8 @NgModule({
 9     imports: [
10         CommonModule,
11         FormsModule
12     ],
13     declarations: [
14         HeroesComponent,
15         HeroDetailComponent
16     ]
17 })
18 
19 export class HeroModule { }