创建组件在components文件夹下创建一个从数据库下载的公共组件。打开命令行（使用vscode编辑器的可以直接使用Ctrl+`快捷键打开终端，然后一路跳转到components文件夹：cdsrc\app\components在该目录下执行命令：nggc上面命令的es-download意思是创建一个名为es-download的组件，使用上面命令创建的组件会自动引用前端训练的components模块。/es-download/es-download.component';//引入组件@NgModule({declarations:[...,EsDownloadComponent],//declarationcomponent})以上在使用nggces-download命令时自动完成,但是如果你想在其他模块中使用es-download组件的话，就必须导出。导出的方式是在components.module.ts文件的exports中添加这个组件：@NgModule({declarations:[...,EsDownloadComponent],imports:[...],exports:[...,EsDownloadComponent],})exportclassComponentsModule{}组件的基本概念在es-download.component.tsimport{Component,OnInit}from'@angular/core';@Component({selector:'app-es-下载',templateUrl:'./es-download.component.html',styleUrls:['./es-download.component.css']})exportclassEsDownloadComponentimplementsOnInit{constructor(){}ngOnInit():void{}}可以看出这里的Component装饰器是从@angular/core引入的；并使用@Component创建并装饰了一个类；在@Component中设置了selector自定义标签和template模板。组件的几个关键知识点如下：组件与模块模块是在组件之上的一层抽象。组件、指令、管道、服务、路由等都可以通过模块来组织。Angular提供了@NgModule装饰器来创建模块。一个应用程序可以有多个模块，而只有一个根模块（RootModule）。其他模块称为功能模块。根模块是启动应用程序的入口模块。根模块您必须通过引导元数据指定应用程序的根组件，然后通过bootstrapModule()方法启动应用程序。创建一个根模块，将其命名为AppModule，并将其保存为app.module.ts。在app.module.ts中，AppComponent组件是通过@NgModuleimport{NgModule}from'@angular/core'的引导元数据指定的；从'./app.component'导入{AppComponent}；@NgModule({declarations:[...],imports:[...],providers:[...],bootstrap:[AppComponent]})exportclassAppModule{}AppComponent组件是根组件。再创建一个main.ts，使用platformBrowserDynamic().bootstrapModule()方法启动根模块，在页面显示AppComponent组件的内容。从'@angular/platform-b??rowser-dynamic'导入{platformBrowserDynamic}；从'./app/app.module'导入{AppModule}；platformBrowserDynamic().bootstrapModule(AppModule).catch(err=>console.error(err));参考es-download组件由于我们首先将es-download组件引入components模块，并从该模块导出，所以如果要在其他模块中使用es-download组件，必须先导入components模块。使用根模块AppModule作为父组件，在模块中首先引用es-download组件：({declarations:[...],imports:[...,ComponentsModule,],})exportclassAppModule{}导入组件模块等同于导入该模块中的所有组件和方法。根据selector:'app-es-download'使用es-download组件，所以要使用es-download组件需要在
