自定义模块
- 当我们项目比较小的时候可以不用自定义模块。但是当我们项目非常庞大的时候把所有的组件都挂载到根模块里面不是特别合适。所以这个时候我们就可以自定义模块来组织我们的项目
1.创建user模块，并创建user模块下的组件
ng g module modules/user
ng g component modules/user
ng g component modules/components/address
ng g component modules/components/order
ng g component modules/components/profile
1
2
3
4
5
2
3
4
5
2.app.module.ts引入自定义模块
//app.module.ts
//上百个组件，会导致页面加载比较缓慢 所以要模块化
//引入自定义模块
import { UserModule } from './modules/user/user.module';
imports: [
BrowserModule,
AppRoutingModule,
UserModule
],
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
3.暴露组件
- 如果想让user模块中的组件可以在其他模块里使用，需要暴露组件,之后就可以在其他组件中使用了
// user.module.ts
@NgModule({
//user模块的组件
declarations: [ProfileComponent, AddressComponent, OrderComponent, UserComponent],
//暴露组件，让其他模块里面可以使用
exports: [UserComponent,AddressComponent],
providers: [CommonService],
imports: [
CommonModule
]
})
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<!-- app.component.html -->
<app-user></app-user>
<app-address></app-address>
1
2
3
2
3