angular7中自定义模块

偏执的太偏执、 2022-02-28 10:00 185阅读 0赞

当我们项目比较小的时候可以不用自定义模块，但是当我们项目非常庞大的时候把所有组件都挂载导根模块里面不是特别的合适，因为这样会导致加载很慢。所有我们这个时候就可以自定义模块来组织我们的项目。并通过angular自定义模块可以实现路由的懒加载。

首先在angular中如何实现自定义模块？

#### 一、创建项目 ####

*  ng new projectName --skip-install
 *  cd projectName
 *  cnpm install
 *  ng serve --open

#### 二、 创建模块 ####

假如我们创建一个user模块：

*  ng g module modules/user 创建模块
 *  ng g c modules/user 创建根组件
    
     *  ng g c modules/user/components/address 创建其他组件 address
     *  ng g c modules/user/components/order 创建其他组件 order
     *  ng g c modules/user/components/profile 创建其他组件 profile
 *  ng g s modules/user/services/common 创建服务 common  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]  
    **模块创建好之后，创建里面的组件，会自动导入到其对应的根模块， 即user.module.ts中**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]

#### 模块的导入 ####

创建的模块UserModule必须导入到AppModule根模块中。

import { UserModule } from './modules/user/user.module';
    imports: [
        BrowserModule,
        AppRoutingModule,
        UserModule
      ],

#### 模块中组件的使用 ####

*  自定义模块中的组件在自定义模块的模板中可以使用，因为自定义模块中导入并依赖了对应的组件。
 *  自定义模块不可以直接在根组件中使用，使用的话必须在自定义模块中导出才可以使用  
    user.module.ts

exports: [
        UserComponent,
        AddressComponent
      ]

#### 服务的使用 ####

定义好服务之后，可以在自定义的模块中使用，然后在对应的组件及子组件中使用。

user.module.ts

import { CommonService } from './services/common.service';
    providers: [CommonService]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20220228/2fa36dd5bdf0471697467e592864edd5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]: /images/20220228/c479837b2e9e42c08ae3956a1fada0bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 2]: /images/20220228/91f5aa9bc4ce42d2a045753187a11396.png