【前端第1篇】Angular自定义组件

前言

最近做的Angular项目中有一个功能——数据库下载，在不同的组件中都有用到，所以期望将其抽象成一个公用组件，将代码得以复用。主要涉及到以下知识点：创建组件、组件的基本概念、组件与模块、引用组件、使用组件、组件交互等。

创建组件

在components文件夹下创建一个数据库下载的公用组件。

打开命令行(使用vscode编辑器的小伙可以直接使用Ctrl+` 快捷键打开终端,然后一路跳转到components文件夹：

cd src\app\components

在此目录下执行指令：

ng g c es-download

上面指令的意思是创建一个名为es-download的组件，

使用上面的指令创建的组件是会被自动引用到components这个模块中的。
components.module.ts

import {
    EsDownloadComponent } from './es-download/es-download.component';  //引入组件
@NgModule({
   
  declarations: [..., EsDownloadComponent],//声明组件
})

上面是在使用ng g c es-download指令时自动完成的，但若是想在其它的模块中使用这个es-download组件，还得将其导出，导出的方式是将这个组件添加至components.module.ts文件的exports中：

@NgModule({
   
  declarations: [..., EsDownloadComponent],
  imports: [...],
  exports: [..., EsDownloadComponent],
})
export class ComponentsModule {
    }

组件的基础概念

查看es-download.component.ts

import {
    Component, OnInit } from '@angular/core';

@Component({
   
  selector: 'app-es-download&#