Angular 5 自定義文件上傳組件（一）
Angular 5 自定義文件上傳組件（二）本節(jié)內(nèi)容主要是：
- 開(kāi)發(fā)upload component
- 總結(jié)開(kāi)發(fā)過(guò)程中的知識(shí)點(diǎn)
在第二節(jié)中樊销，我們使用Angular CLI創(chuàng)建了項(xiàng)目結(jié)構(gòu)，并且仔細(xì)分析了upload module的知識(shí)點(diǎn)。這一節(jié)，我們來(lái)開(kāi)發(fā)upload并分析其中的知識(shí)點(diǎn)抒抬。
看一下我們的upload渲染效果：
在第二節(jié)中我們分析過(guò)，upload組件非常簡(jiǎn)單惭缰，只有1個(gè)上傳按鈕议纯，當(dāng)點(diǎn)擊這個(gè)按鈕時(shí)，會(huì)彈出模態(tài)對(duì)話框浅役，用戶需要在模態(tài)對(duì)話框中選擇上傳的文件并執(zhí)行上傳斩松。
我們先把模態(tài)動(dòng)畫(huà)框放在一邊，來(lái)實(shí)現(xiàn)upload組件觉既。
打開(kāi) upload.component.ts惧盹，并修改如下：
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material';
import { DialogComponent } from './dialog/dialog.component';
@Component({
selector: 'app-upload',
templateUrl: './upload.component.html',
styleUrls: ['./upload.component.css']
})
export class UploadComponent {
constructor(public dialog: MatDialog) {}
public openUploadDialog() {
const dialogRef = this.dialog.open(DialogComponent, { width: '50%', height: '50%' });
}
}
注意到，我們?cè)赨ploadComponent的構(gòu)造函數(shù)里面瞪讼，通過(guò)Angular提供的依賴注入機(jī)制注入了MatDialog這個(gè)service钧椰。MatDialog這個(gè)service定義在了MatDialogModule的providers中，而我們?cè)诘诙?jié)中符欠，已經(jīng)將MatDialogModule加入到了upload module的NgModule裝飾器的imports數(shù)組中嫡霞。因此，在這里希柿，我們可以直接使用MatDialog這個(gè)services而不用額外的把它加入到upload module或者當(dāng)前component的providers數(shù)組中诊沪。關(guān)于MatDialog的具體使用方法养筒，詳見(jiàn)官方教程 MatDialog官方教程
同時(shí)，由于我們需要打開(kāi)的是我們自定義的DialogComponent端姚，所以晕粪，還使用下面的代碼引入了對(duì)它的依賴
import { DialogComponent } from './dialog/dialog.component';
我們還定義了一個(gè)函數(shù) openUploadDialog 用于打開(kāi)模態(tài)對(duì)話框。open 方法的具體使用以及參數(shù)介紹寄锐，詳見(jiàn)前面的官方教程兵多。
這樣，component我們基本開(kāi)發(fā)完成橄仆，現(xiàn)在剩膘，讓我們來(lái)添加對(duì)應(yīng)的模板。
打開(kāi) upload.component.html 并修改如下：
<button mat-raised-button color="primary" (click)="openUploadDialog()">Upload</button>
注意到我們使用了mat-raised-button這個(gè)指令盆顾，這個(gè)指令是由MatButtonModule提供怠褐。同樣的，我們已經(jīng)在upload module的NgModule的imports數(shù)組中引入了MatButtonModule模塊您宪，這里我們就可以直接使用這個(gè)指令了奈懒。
同時(shí)，我們還通過(guò)Angular提供的事件綁定語(yǔ)法將button的click事件和后臺(tái)的openUploadDialog處理函數(shù)進(jìn)行了綁定宪巨。
這樣磷杏，upload組件就寫(xiě)好了。
本文結(jié)束捏卓，下篇繼續(xù)极祸。
