HiDocs
Search K

Appearance

1.内置模块 ​

image-20230915094753447

2.自定义模块创建与使用 ​

当我们项目比较小的时候可以不用自定义模块。但是当我们项目非常庞大的时候把所有的组件都挂载到根模块里面不是特别合适。（如果几百个组件都挂载到根模块，那么需要一次性全部加载，就会影响性能）

所以这个时候我们就可以自定义模块来组织我们的项目。并且通过 Angular 自定义模块可以实现路由的懒加载（不必第一次就把所有的组件全部加载）。

image-20230915095026769

1.指令创建自定义模块 ​

bash
ng g module module/user

注意：有时候没法自动出来user组件，我们再加一句命令ng g component module/user/user

创建profile组件：

bash
ng g component module/user/components/profile

2.暴露自定义模块 ​

本质上暴露的是本模块的根组件！

ts
import { ProductComponent } from './main.component'; //注意：本质上这里引入的是ts而不是html

declarations: [ProductComponent], //暴露之前还需要在这里声明组件
exports:[ProductComponent]

image-20230915100112635

3.挂载自定义模块 ​

在app.module.ts里面：

js
//上百个组件  会导致页面加载比较慢  所以要模块化
//引入自定义模块
import { UserModule } from './module/user/user.module';
import { ProductModule } from './module/product/product.module';

imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    UserModule,
    ProductModule,
],

4.注意事项 ​

注意：自定义模块里面的用法也和app模块是一样的，不同的就是需要暴露并挂载自定义模块

项目比较小的时候，不建议用自定义模块，项目大的时候最好使用！

注意：自定义模块里面的组件，如果没有暴露出去，是无法在外部模块里面进行访问的！

如何在外部模块使用本模块的组件得到允许呢？暴露组件

image-20230915101112010

3.自定义模块路由懒加载 ​

注意：模块是可以在路由里面被懒加载的（所以可以把每一个组件都放到一个模块里面，保证每一个组件都被懒加载，但是相对麻烦）！

1.创建模块组件结构 ​

image-20230915101830841

bash
创建模块：
ng g module module/user --routing  #创建模块的时候在最后加上--routing
ng g module module/article --routing
ng g module module/product --routing

注意：如果忘记加 --routing，需要自己创建xxx-routing.module.ts文件，并在.module文件里面进行配置引入

注意：模块即便不需要路由，这个路由文件也是必须配置的，否则懒加载也是会失败的！！！

ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ArticleComponent } from './article.component';

const routes: Routes = [
    { 
       path: '', 
       component: ArticleComponent 
    }
];

@NgModule({
  //注意：自定义模块的RouterModule这里是forChild而不是forRoot
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class ArticleRoutingModule {}

image-20230919144606213

ts
import { VisualRoutingModule } from "./visual-routing.module";

2.配置路由懒加载 ​

1.在app路由里面懒加载模块

js
{
    path: 'user',
    loadChildren: () =>
      import('./module/user/user.module').then((m) => m.UserModule),
},

image-20230915102454098

2.在自定义模块路由里面配置默认加载的组件，即模块的根组件（这个也是必须的，否则app引入了模块不知道加载哪个组件）

js
{
    path: '',
    component: UserComponent,
},

image-20230915102511433

这样/user/profile加载的就是ProfileComponent组件了！

注意：一旦配置了路由懒加载，就不需要把自定义模块的根组件导出了，也不需要在app里面import自定义模块了！！！

4.父子嵌套自定义模块 ​

这种方式也是常用的模块构建方法，要学会使用！

自定义模块中，子模块可以使用父模块里面的内容方法吗？

不可以！

在 Angular 中，子模块可以使用父模块里面的内容和方法，但前提是你必须导入父模块或在父模块中将需要共享的内容导出。

5.常用策略：shared模块 ​

image-20230921113655071

在shared模块里面可以定义各个模块需要用到的公共组件、antd组件、管道、directives、服务等内容！我们全部暴露即可！

使用：在自定义模块里面进行引入即可，在其子自定义模块里面也必须引入才可以使用，否则不能！

image-20230921113849653