在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 { }

imports(导入):

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

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

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

providers(提供者):

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

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

@NgModule({
  providers: [MyService], // 提供MyService服务
  // ...
})
export class MyModule { }

exports(导出):

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

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

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

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

10-01 01:20