package.json // 定义包的基本信息，包括名字、版本号、依赖等
tsconfig.json // angular项目基于typescript进行搭建，须要此文件来指定ts的编译规则
... // tslint等一些帮助开拓的配置文件
index.ts // 放在根目录，导出须要导出的模块、做事等
/src // 实际模块的实现
/src/module.ts // 模块的定义
/src/service.ts // 弹窗做事
/src/templates/ // 作为模板的组件
/src/popup.ref.ts // 对创建好的组件引用的封装工具
/src/animations.ts // 动画的配置
现在我们只来关心src目录下的实现。
弹窗做事弹窗做事的职责是供应一个叫做open的方法，用来创建出组件并显示，还得对创建好的组件进行良好的掌握:
弹窗的引用工具
上面做事中的open方法实际上把创建组件的细节通过new一个YupRef即弹窗引用来实现，这是由于考虑到做事本身是单例，如果仅利用open方法直接创建多个弹窗，在利用时会丢失除了末了一个弹窗外的掌握能力，笔者这里采取的办法是将创建的弹窗封装成一个类即YupRef:
这样一来每次调用open方法后都能得到一个YupRef工具，供应了关闭方法以及对关闭事宜的订阅方法。
预制弹窗组件弹窗做事中的open方法须要两个参数，第二个是传入的自定义数据，第一个便是须要创建的组件了，现在我们创建出几个预制组件，以dialog.component为例:
用笔者这种办法创建的组件有两个尴尬的小问题:
不能利用隐式的依赖注入了，必须注入Injector做事来手动get到注入的两个依赖，即代码中的
this.injector.get(YUP_DATA) 和 this.injector.get(YupRef) 。
直策应用angular动画会失落效，由于是暴力添加到DOM中的办法，必须手动setTimeout过等动画结束再真正销毁组件。
创建好组件后再做事中添加快捷创建此组件的方法:
额外须要提一点是虽然这样创建的组件没有被一开始就添加到页面中，仍旧须要在所属模块的declaration中声明，并且还得在entryComponent中声明过，否则angular就会通过报错的办法让你这么做，就像下面这个弹窗模块的定义这样:
而此弹窗模块真正须要导出的东西有4个，都列在index.ts中:
利用方法
终极在外界的利用办法如下:
当不想利用预制的弹窗组件时，大可以自行创建好一个组件，然后利用open方法:
乍一看是不是有点靠近Material2的Dialog的利用呢 :) ，不过来自Google Inc的Material2版究极Dialog模块做了极变态的抽象以及组件嵌套，推举勇士前去研究。
详细的源代码笔者托管在Github上，几个预制组件是参照weui的样式实现的。
