共计 3512 个字符，预计需要花费 9 分钟才能阅读完成。
创立组件
在 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’,
templateUrl: ‘./es-download.component.html’,
styleUrls: [‘./es-download.component.css’]
})
export class EsDownloadComponent implements OnInit {
constructor() {}
ngOnInit(): void {
}
}能够看到此处从 @angular/core 中引入 Component 装璜器；并且建设了一个类，用 @Component 润饰它；在 @Component 中，设置了 selector 自定义标签和 template 模板。组件的几个要害知识点如下：
组件与模块
模块是在组件之上的一层形象，组件以及指令、管道、服务、路由等都能通过模块去组织。
Angular 提供了 @NgModule 装璜器来创立模块，一个利用能够有多个模块，有且只有一个根模块（Root Module），其余模块叫做个性模块 (Feature Module)
根模块是启动利用的入口模块，根模块必须通过 bootstrap 元数据来指定利用的根组件，而后通过 bootstrapModule()办法来启动利用。
建设一个根模块，命名为 AppModule，并将它保留为 app,module.ts。
app.module.ts 中通过 @NgModule 的 bootstrap 元数据指定 AppComponent 组件
import {NgModule} from ‘@angular/core’;
import {AppComponent} from ‘./app.component’;
@NgModule({
declarations: […],
imports: […],
providers: […],
bootstrap: [AppComponent]
})
export class AppModule {}
AppComponent 组件即为根组件。
再创立一个 main.ts，利用 platformBrowserDynamic().bootstrapModule()办法来启动根模块，并将 AppComponent 组件的内容展现到页面上。
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 这个模块中，并从这个模块中导出的，所以想要在其它模块中应用 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 模块就相当于是引入那个那个模块中的所有组件和办法。
应用 es-download 组件
依据 selector: ‘app-es-download’, 所以要应用 es-download 这个组件，须要在 HTML 中增加自定义标签
<app-es-download></app-es-download>，而后 Angular 便会在此标签中插入 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()”
数据库下载 </button> 所以 es-download.component.ts 中须要实例化一个用来订阅和触发自定义事件的 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 将数据流向父组件
……
// 点击事件函数 esDownload() { …….}}
数据交互
父组件将数据通过属性绑定的形式流向子组件，子组件通过输出属性 @Input 获取来自父组件的数据。
父组件的 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 数据是通过装璜器 @Input 来获取来自父组件的 name 对象，数据由父组件流出，在子组件中通过输出属性 @Input 实现数据的接管。
