创立组件
在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实现数据的接管。