創(chuàng)建組件在components文件夾下創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)下載的公用組件。 打開(kāi)命令行(使用vscode編輯器的小伙可以直接使用Ctrl+` 快捷鍵打開(kāi)終端,然后一路跳轉(zhuǎn)到components文件夾： cd src\app\components 在此目錄下執(zhí)行指令： ng g c es-download 上面指令的意思是創(chuàng)建一個(gè)名為es-download的組件，
使用上面的指令創(chuàng)建的組件是會(huì)前端培訓(xùn)被自動(dòng)引用到components這個(gè)模塊中的。 import { EsDownloadComponent } from './es-download/es-download.component'; //引入組件@NgModule({ declarations: [..., EsDownloadComponent],//聲明組件})上面是在使用ng g c es-download指令時(shí)自動(dòng)完成的 但若是想在其它的模塊中使用這個(gè)es-download組件，還得將其導(dǎo)出。 導(dǎo)出的方式是將這個(gè)組件添加至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裝飾器；并且建立了一個(gè)類，用@Component修飾它；在@Component中，設(shè)置了selector自定義標(biāo)簽和template模板。組件的幾個(gè)關(guān)鍵知識(shí)點(diǎn)如下： 組件與模塊模塊是在組件之上的一層抽象，組件以及指令、管道、服務(wù)、路由等都能通過(guò)模塊去組織。 import { NgModule } from '@angular/core';import { AppComponent } from './app.component';@NgModule({ declarations: [...], imports: [...], providers: [...], bootstrap: [AppComponent]
})export class AppModule { }AppComponent組件即為根組件。 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app/app.module';platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));引用es-download組件由于我們最開(kāi)始是將es-download組件引入到components這個(gè)模塊中，并從這個(gè)模塊中導(dǎo)出的，所以想要在其它模塊中使用 es-download組件就得先引入components模塊。 import { NgModule } from '@angular/core';import { ComponentsModule } from './components/components.module';@NgModule({ declarations: [...], imports: [..., ComponentsModule,
],
})export class AppModule { }引入了components模塊就相當(dāng)于是引入那個(gè)那個(gè)模塊中的所有組件和方法。 使用es-download組件根據(jù)selector: 'app-es-download',所以要使用es-download這個(gè)組件，需要在HTML中添加自定義標(biāo)簽 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中的按鈕有點(diǎn)擊事件 <button style="..." nz-button nzType="primary" (click)="esDownload()"> 數(shù)據(jù)庫(kù)下載</button> 所以es-download.component.ts中需要實(shí)例化一個(gè)用來(lái)訂閱和觸發(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(); //通過(guò)輸出屬性@Output將數(shù)據(jù)流向父組件......//點(diǎn)擊事件函數(shù)esDownload() { ....... }}數(shù)據(jù)交互父組件將數(shù)據(jù)通過(guò)屬性綁定的方式流向子組件，子組件通過(guò)輸入屬性@Input獲取來(lái)自父組件的數(shù)據(jù)。 <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ù)是通過(guò)裝飾器@Input來(lái)獲取來(lái)自父組件的name對(duì)象，數(shù)據(jù)由父組件流出，在子組件中通過(guò)輸入屬性@Input完成數(shù)據(jù)的接收。 |
|
|
