angular学习2-内置模块和自定义模块

5. 内置模块和自定义模块化

5.1 内置模块

 

 

5.2 自定义模块

5.2.1 自定义模块概述

当项目比较大，一个项目有很多个组件。如果把所有的组件都挂载到根模块，首次加载的时候就会耗费很长的时间。所以就将功能相同的组件挂载到同一个模块，实现按需加载，这就是组件模块化。

每个模块的就相当于一个局部的根模块，可以有自己的组件、服务和指令等。

 

 

5.2.2 如何创建和应用自定义模块

创建自定义模块：

ng g module pages/user

在app.module.ts引入自定义模块

import { UserModule } from './modules/user/user.module'
​
...
imports: [
 ...
 UserModule
]
...

给模块user创建模块实例。并在根模块中挂载（这一步要手动执行，这里不进行演示了）

ng g component pages/user

在user模块下面声明和挂载组件

ng g component pages/user/login

注：一般在那个模块目录下面创建组件，这个组件就会自动在哪个模块的配置文件中挂载。另外如果组件是挂载到自定义模块中，则需要用exports暴露一下才能使用(既能在当前模块用，也能在其他模块中用)。具体语法如下：

// module-user.module.ts
...
@NgModule({
  declarations: [LoginComponent],
  exports: [LoginComponent],
  ...
})

创建模块的服务

ng g service pages/user/service/common

将新创建的服务挂载到user模块中（一个新创建的服务不会自动挂载到任何模块，需要手动挂载）

// module-user.module.ts
import { CommonService } from './service/common.service'
...
@NgModule({
  ...
  providers: [CommonService]
})

 

5.2.3 模块配置介绍

 

5.2.4 自定义模块路由的懒加载

创建一个带路由的product模块

ng g module pages/product --routing

在product模块下创建要给根组件

ng g component pages/product

路由懒加载：通过loadChildren懒加载模块

// app-routing.module.ts
...
const routes: Routes = [
  {
    path: 'product',
    // loadChildren用以解析惰性加载的路由集合，上面的一种方式已经不推荐使用
    // loadChildren: './login/login.module#LoginModule'
    loadChildren: () => import('./pages/product.module').then(mod => mod.LoginModule)
  },
 ...

只有当路由切换到product的时候在回加载这个模块以及挂载到这个模块的组件

product模块的路由配置方式有两种：

方式一：通过product/detail访问product模块的商品详情组件，但是组件是挂载到根组件app上的。

// product-routing.module
{
    path: 'detail',
    component: ProdDetailComponent
  }

方式二： 通过父子路由的方式。通过product/list的方式访问product模块的商品列表组件，但是组件是挂载到product模块上的

// product-routing.module
{
    path: '',
    component: ProductComponent,
    children: [{
      path: 'list',
      component: ProdListComponent
    }]
  }

同时要在product模块html文件上添加路由显示占位符

<!--product.component.html-->
<p>商品模块</p>
<router-outlet></router-outlet>