Angular 中declarations，imports，providers，exports的用法？

在Angular中，declarations、imports、providers和exports是NgModule（模块）装饰器中的关键配置项，用于定义和配置Angular应用的模块。每个模块在应用中扮演不同的角色，以下是它们的主要用法：

declarations（声明）：

declarations 数组中列出了当前模块中所有属于这个模块的组件、指令和管道。
所有在 declarations 中列出的组件、指令和管道都可以在当前模块中的任何组件模板中使用。
Angular只会创建和管理在 declarations 中声明的组件、指令和管道。
示例：

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

@NgModule({
  declarations: [MyComponent, MyDirective, MyPipe],
  // ...
})
export class MyModule { }

1
2
3
4
5
6
7
8
9
10
11

imports（导入）：

imports 数组中列出了当前模块所依赖的其他模块。
通过 imports，你可以在当前模块中使用其他模块中声明的组件、指令和服务。
Angular模块之间的依赖关系是通过 imports 来建立的。
示例：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; // 导入CommonModule

@NgModule({
  imports: [CommonModule], // 导入CommonModule
  // ...
})
export class MyModule { }

1
2
3
4
5
6
7
8
9

providers（提供者）：

providers 数组中列出了当前模块提供的服务。
服务是用来共享数据或功能的，providers 声明了哪些服务在当前模块中是可用的。
当在 providers 中列出的服务被注入到组件或其他服务中时，它们会被创建或共享。
示例：

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

@NgModule({
  providers: [MyService], // 提供MyService服务
  // ...
})
export class MyModule { }
1
2
3
4
5
6
7
8

exports（导出）：

exports 数组中列出了当前模块中声明的组件、指令和管道，这些组件、指令和管道可以被其他模块导入并使用。
通常，exports 用于共享模块中的一些可重用的组件、指令或管道，使它们在其他模块中可用。
示例：

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

@NgModule({
  declarations: [MyComponent],
  exports: [MyComponent], // 导出MyComponent组件
  // ...
})
export class MyModule { }

1
2
3
4
5
6
7
8
9
10

总结来说，这些NgModule装饰器中的配置项有助于组织和管理Angular应用中的不同模块，以及它们之间的关系。通过合理配置这些项，可以使你的Angular应用更加模块化、可维护和可扩展。