Angular 5 自定义文件上传组件（三）

Angular 5 自定义文件上传组件（一）
Angular 5 自定义文件上传组件（二）

本节内容主要是：

1. 开发upload component
2. 总结开发过程中的知识点

在第二节中，我们使用Angular CLI创建了项目结构，并且仔细分析了upload module的知识点。这一节，我们来开发upload并分析其中的知识点。

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

upload组件

在第二节中我们分析过，upload组件非常简单，只有1个上传按钮，当点击这个按钮时，会弹出模态对话框，用户需要在模态对话框中选择上传的文件并执行上传。
我们先把模态动画框放在一边，来实现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的构造函数里面，通过Angular提供的依赖注入机制注入了MatDialog这个service。MatDialog这个service定义在了MatDialogModule的providers中，而我们在第二节中，已经将MatDialogModule加入到了upload module的NgModule装饰器的imports数组中。因此，在这里，我们可以直接使用MatDialog这个services而不用额外的把它加入到upload module或者当前component的providers数组中。关于MatDialog的具体使用方法，详见官方教程 MatDialog官方教程

同时，由于我们需要打开的是我们自定义的DialogComponent，所以，还使用下面的代码引入了对它的依赖

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

我们还定义了一个函数 openUploadDialog 用于打开模态对话框。open 方法的具体使用以及参数介绍，详见前面的官方教程。

这样，component我们基本开发完成，现在，让我们来添加对应的模板。

打开 upload.component.html 并修改如下：

<button mat-raised-button color="primary" (click)="openUploadDialog()">Upload</button>

注意到我们使用了mat-raised-button这个指令，这个指令是由MatButtonModule提供。同样的，我们已经在upload module的NgModule的imports数组中引入了MatButtonModule模块，这里我们就可以直接使用这个指令了。
同时，我们还通过Angular提供的事件绑定语法将button的click事件和后台的openUploadDialog处理函数进行了绑定。

这样，upload组件就写好了。

本文结束，下篇继续。