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

本节内容主要是：

1. 理清设计思路
2. 创建代码结构
3. 整理知识点

我们先来看一下最终实现的效果

图1 上传按钮

图2 点击上传按钮后弹出的对话框

图3 文件上传完成界面

以上三张图即为文件上传组件的最终实现效果。
从这三张图中可以分析出来，我们需要：

1. 文件上传组件（图1 中的上传按钮）
2. 模态对话框组件（图2，图3的模态对话框）

下面，我们就开始编写这些组件。

由于我们的目标是做一个可以被重复使用的组件，所以，我们应该先创建一个module，然后在module内开发component。

执行下列命令创建一个module

ng generate module upload

执行下列命令创建文件上传component

ng generate component upload

执行下列命令创建模态对话框component

ng generate component upload/dialog

执行下列命令创建upload service，用于提供和服务器进行交互的接口

ng generate service upload

打开刚才新建的upload module模块，引入依赖的模块，修改如下：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UploadComponent } from './upload.component';
import { MatButtonModule, MatDialogModule, MatListModule, MatProgressBarModule } from '@angular/material';
import { DialogComponent } from './dialog/dialog.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { UploadService } from './upload.service';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [CommonModule,
            BrowserAnimationsModule,
            HttpClientModule,
            MatButtonModule,
            MatDialogModule,
            MatListModule,
            MatProgressBarModule],
  declarations: [UploadComponent, DialogComponent],
  exports: [UploadComponent],
  entryComponents: [DialogComponent],
  providers: [UploadService]
})
export class UploadModule {}

上面代码的重点是@NgModule这个装饰器。装饰器实际就是一个方法，它可以用来为宿主提供一些元数据。
对于装饰器的详细用法以及实现原理，这里有一篇博文，有兴趣的可以去看一下 Decorators & metadata reflection in TypeScript: From Novice to Expert (Part I)

太过于原理的东西就不在这里详细描述了，我自己也并没有完全弄懂，我们来仔细分析一下NgModule里面的内容。

NgModule官方文档

首先，看到imports这个数组，官方对于这个数组的解释是这样的：

imports官方解释

在imports数组中导入的模块，就可以被本模块“作用域”内的其他组件使用了，“作用域”是我的理解，可能不是非常正确，但是差不多就是这个意思。为了让本模块内的组件能够使用Angular Material提供的功能，我们在imports里引入了 Material*Module。

declarations数组，官方对于这个数组的解释是这样的：

declarations官方解释

解释的非常清楚，declarations数组中用来声明属于本模块的组件。在declarations数组中声明的组件，就能使用在imports数组中引入的模块。因此，我们的UploadComponent和DialogComponent就可以使用在imports数组中引入的 Material*Module 了。

exports数组，官方对于这个数组的解释是这样的：

exports官方解释

exports数组用于指定外部模块导入本模块时可以使用本模块的哪些组件。在这里，我们导出了UploadComponent，那么，当app module的NgModule的imports中引入了upload module以后，在AppComponent中，我们就能直接使用upload component组件了。

entryComponents数组，官方解释：

entryComponents官方解释

provider数组，官方解释：

provider官方解释

本文结束，下篇继续。