Angular 5 自定義文件上傳組件（一）
Angular 5 自定義文件上傳組件（二）

本節(jié)內(nèi)容主要是：

1. 開發(fā)upload component
2. 總結(jié)開發(fā)過程中的知識點(diǎn)

在第二節(jié)中，我們使用Angular CLI創(chuàng)建了項(xiàng)目結(jié)構(gòu)，并且仔細(xì)分析了upload module的知識點(diǎn)。這一節(jié)，我們來開發(fā)upload并分析其中的知識點(diǎn)。

看一下我們的upload渲染效果：

upload組件

在第二節(jié)中我們分析過，upload組件非常簡單，只有1個(gè)上傳按鈕，當(dāng)點(diǎn)擊這個(gè)按鈕時(shí)，會(huì)彈出模態(tài)對話框，用戶需要在模態(tài)對話框中選擇上傳的文件并執(zhí)行上傳。
我們先把模態(tài)動(dòng)畫框放在一邊，來實(shí)現(xiàn)upload組件。

打開 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%' });
  }
}

注意到，我們在UploadComponent的構(gòu)造函數(shù)里面，通過Angular提供的依賴注入機(jī)制注入了MatDialog這個(gè)service。MatDialog這個(gè)service定義在了MatDialogModule的providers中，而我們在第二節(jié)中，已經(jīng)將MatDialogModule加入到了upload module的NgModule裝飾器的imports數(shù)組中。因此，在這里，我們可以直接使用MatDialog這個(gè)services而不用額外的把它加入到upload module或者當(dāng)前component的providers數(shù)組中。關(guān)于MatDialog的具體使用方法，詳見官方教程 MatDialog官方教程

同時(shí)，由于我們需要打開的是我們自定義的DialogComponent，所以，還使用下面的代碼引入了對它的依賴

import { DialogComponent } from './dialog/dialog.component';

我們還定義了一個(gè)函數(shù) openUploadDialog 用于打開模態(tài)對話框。open 方法的具體使用以及參數(shù)介紹，詳見前面的官方教程。

這樣，component我們基本開發(fā)完成，現(xiàn)在，讓我們來添加對應(yīng)的模板。

打開 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í)，我們還通過Angular提供的事件綁定語法將button的click事件和后臺(tái)的openUploadDialog處理函數(shù)進(jìn)行了綁定。

這樣，upload組件就寫好了。

本文結(jié)束，下篇繼續(xù)。