前言

最近做的Angular項目中有一個功能——數(shù)據(jù)庫下載，在不同的組件中都有用到，所以期望將其抽象成一個公用組件，將代碼得以復(fù)用。主要涉及到以下知識點：創(chuàng)建組件、組件的基本概念、組件與模塊、引用組件、使用組件、組件交互等。

創(chuàng)建組件

在components文件夾下創(chuàng)建一個數(shù)據(jù)庫下載的公用組件。

打開命令行(使用vscode編輯器的小伙可以直接使用Ctrl+` 快捷鍵打開終端,然后一路跳轉(zhuǎn)到components文件夾：

cd src\app\components

在此目錄下執(zhí)行指令：

ng g c es-download

上面指令的意思是創(chuàng)建一個名為es-download的組件，

創(chuàng)建的組件.PNG

使用上面的指令創(chuàng)建的組件是會被自動引用到components這個模塊中的。
components.module.ts

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

上面是在使用ng g c es-download指令時自動完成的，但若是想在其它的模塊中使用這個es-download組件，還得將其導(dǎo)出，導(dǎo)出的方式是將這個組件添加至components.module.ts文件的exports中：

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

組件的基礎(chǔ)概念

查看es-download.component.ts

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

@Component({
  selector: 'app-es-download',
  templateUrl: './es-download.component.html',
  styleUrls: ['./es-download.component.css']
})
export class EsDownloadComponent implements OnInit {
  constructor() { }
  ngOnInit(): void {
  }
}

可以看到此處從@angular/core中引入Component裝飾器；并且建立了一個類，用@Component修飾它；在@Component中，設(shè)置了selector自定義標(biāo)簽和template模板。
組件的幾個關(guān)鍵知識點如下：

組件的基礎(chǔ).PNG

組件與模塊

模塊是在組件之上的一層抽象，組件以及指令、管道、服務(wù)、路由等都能通過模塊去組織。
Angular提供了@NgModule裝飾器來創(chuàng)建模塊，一個應(yīng)用可以有多個模塊，有且只有一個根模塊（Root Module），其他模塊叫做特性模塊(Feature Module)
根模塊是啟動應(yīng)用的入口模塊，根模塊必須通過bootstrap元數(shù)據(jù)來指定應(yīng)用的根組件，然后通過bootstrapModule()方法來啟動應(yīng)用。
建立一個根模塊，命名為AppModule，并將它保存為app,module.ts。
app.module.ts中通過@NgModule的bootstrap元數(shù)據(jù)指定AppComponent組件

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [...],
  imports: [...],
  providers: [...],
  bootstrap: [AppComponent]
})
export class AppModule { }

AppComponent組件即為根組件。
再創(chuàng)建一個main.ts，利用platformBrowserDynamic().bootstrapModule()方法來啟動根模塊，并將AppComponent組件的內(nèi)容展示到頁面上。

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

引用es-download組件

由于我們最開始是將es-download組件引入到components這個模塊中，并從這個模塊中導(dǎo)出的，所以想要在其它模塊中使用 es-download組件就得先引入components模塊。
將根模塊AppModule，作為父組件來引用一下es-download組件
首先在模塊里引用：

import { NgModule } from '@angular/core';
import { ComponentsModule } from './components/components.module';

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

引入了components模塊就相當(dāng)于是引入那個那個模塊中的所有組件和方法。

使用es-download組件

根據(jù)selector: 'app-es-download',所以要使用es-download這個組件，需要在HTML中添加自定義標(biāo)簽
<app-es-download></app-es-download>，然后Angular便會在此標(biāo)簽中插入EsDownloadComponent組件中指定的模板。

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

@Component({
  selector: 'app-es-download',
  templateUrl: './es-download.component.html',
  styleUrls: ['./es-download.component.css']
})

組件交互

事件交互

由于es-download.component.html中的按鈕有點擊事件

<button
  style="..."
  nz-button
  nzType="primary"
  (click)="esDownload()"
>
  數(shù)據(jù)庫下載
</button>

所以es-download.component.ts中需要實例化一個用來訂閱和觸發(fā)自定義事件的EventEmitter類

import { Component, OnInit,Output,EventEmitter} from '@angular/core';//引入Output,EventEmitter

@Component({
  selector: 'app-es-download',
  templateUrl: './es-download.component.html',
  styleUrls: ['./es-download.component.css']
})
export class EsDownloadComponent implements OnInit {
  @Output() click = new EventEmitter(); //通過輸出屬性@Output將數(shù)據(jù)流向父組件
......
//點擊事件函數(shù)
esDownload() {
    .......
  }
}

數(shù)據(jù)交互

父組件將數(shù)據(jù)通過屬性綁定的方式流向子組件，子組件通過輸入屬性@Input獲取來自父組件的數(shù)據(jù)。
父組件的html文件：

<app-es-download [name]="name" ></app-es-download>

子組件的ts文件：

import { Component, OnInit,Output,EventEmitter,Input} from '@angular/core';
@Component({
  selector: 'app-es-download',
  templateUrl: './es-download.component.html',
  styleUrls: ['./es-download.component.css']
})
export class EsDownloadComponent implements OnInit {
  @Output() click = new EventEmitter();
  @Input() name:'';

其中name數(shù)據(jù)是通過裝飾器@Input來獲取來自父組件的name對象，數(shù)據(jù)由父組件流出，在子組件中通過輸入屬性@Input完成數(shù)據(jù)的接收。