面试题：Angular项目结构之模块理解

模块在Angular项目中的关键作用

组织代码：模块将相关的组件、服务、管道等代码组织在一起，提高代码的可维护性和可理解性。例如，一个电商应用中，用户相关的功能可以放在UserModule中，产品相关功能放在ProductModule中。
懒加载：可以实现模块的懒加载，当需要时才加载模块及其相关资源，提高应用的初始加载性能。比如在大型应用中，一些不常用的功能模块（如用户反馈模块）可以设置为懒加载。
封装与隔离：模块提供了一定程度的封装，模块内的组件、服务等对于外部模块是隐藏的，只有导出的部分才能被其他模块使用，有助于避免命名冲突和代码的混乱。

创建自定义模块并声明组件、服务和导入其他模块示例

创建自定义模块：使用Angular CLI命令创建模块，打开终端，进入项目目录，执行以下命令：
```
ng generate module my - custom - module
```
这将在src/app目录下生成一个名为my - custom - module的模块文件，包括my - custom - module.ts等相关文件。

在模块中声明组件：假设已经有一个名为MyComponent的组件，先创建组件（如果没有）：

ng generate component my - component

然后在my - custom - module.ts中声明该组件，代码如下：

import { NgModule } from '@angular/core';
import { MyComponent } from './my - component/my - component.component';

@NgModule({
  declarations: [
    MyComponent
  ],
  imports: [
    // 这里导入其他模块
  ],
  providers: [
    // 这里添加服务
  ],
  exports: [
    MyComponent // 如果希望该组件能被其他模块使用，需要导出
  ]
})
export class MyCustomModule { }

在模块中声明服务：假设创建一个名为MyService的服务，先创建服务：

ng generate service my - service

然后在my - custom - module.ts的providers数组中添加该服务：

import { NgModule } from '@angular/core';
import { MyComponent } from './my - component/my - component.component';
import { MyService } from './my - service/my - service.service';

@NgModule({
  declarations: [
    MyComponent
  ],
  imports: [
    // 这里导入其他模块
  ],
  providers: [
    MyService
  ],
  exports: [
    MyComponent
  ]
})
export class MyCustomModule { }

在模块中导入其他模块：例如，要在my - custom - module中使用CommonModule（它提供了一些常用的指令如NgIf、NgFor等），导入如下：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './my - component/my - component.component';
import { MyService } from './my - service/my - service.service';

@NgModule({
  declarations: [
    MyComponent
  ],
  imports: [
    CommonModule
  ],
  providers: [
    MyService
  ],
  exports: [
    MyComponent
  ]
})
export class MyCustomModule { }

星途面试题库

面试题：Angular项目结构之模块理解

知识考点

面试题答案

模块在Angular项目中的关键作用

创建自定义模块并声明组件、服务和导入其他模块示例