2018-08-10 完成angular模态框组件

1、设置标题

标题和头部模板不能同时出现。使用@INPUT设置一个输入属性作为组件的属性可以动态绑定。

2、设置头部和内容模板

此处使用ng-template或者ng-content。使用了前者。前者有一个插槽属性ngTemplateOutlet，类似于router-outlet，使用时，需要加入插槽的名字用于标记在拿一个地方写模板;另外，还有一个属性ngTemplateOutletContext，这个是属性定义了此模板的上下文（即组件初始化中的内容），可以通过let-变量名来引用，用于再模板中显示某些内容。后者有一个select属性，用于直接作为命名标签写模板。自我看来，两者区别不是很大。另外，ng中还有一个ng-container，这仅仅十一i个容器，不在页面中渲染，可以防止任何模板。

3、支持最大化、最小化、关闭

这里的最大化就是最大化到页面可见区域，最小化其实是还原。在这里用到了子父组件的交互，点击子组件中的自定义事件，关闭模态框。最大化在这里使用了显示器的分辨率大小，即screenWidth和screenHeight，正常来说,应该是clientWidth和clientHeight，但是基于组件的不同，body高度如果不设置的话，client（也就是客户端浏览器）就没有高度了。另外了解一下scroll的宽和高（带有滚动条的宽高，滚动宽高），offsetWidth和offsetHeight是拥有内边距  内容以及外边距的宽和高，以及event.client相对于文档的左侧和顶部距离。

还原，需要在最大化的过程中记录开始时的大小，通过鼠标事件e.target寻找模态框的大小。

此处遇到坑，mousedown和本身click事件冲突，因为在mousedown比click事件执行要快，且mousedown存在事件捕获，（ng中阻止时间捕获不好使，尤其是return false），另一个思路解决：在mousedown中添加判断，若事件目标遇到click事件宿主，则仅仅执行click事件，完美解决。放大和还原click事件也是相同思路。

4、支持拖拽

此处用到了5个事件，mousedown、mousemove、mouseup、mouseover以及mouseout，

mousedown：在鼠标按下时触发，无论左键还是右键。出发速度比up快，比click快。当鼠标按下时，需要保存鼠标移动开始时的位置和被移动元素的位置（左侧距离和顶部距离）。

此处遇到坑，一直使用当前点击元素的clientLeft和clientTop，但是这两个值一直是0，当然了，因为真正需要的位置是被移动元素，被移动元素是整个模态框，应该是offsetParent（若不是一层，需要层层向上找）的位置啊。

mousemove：鼠标移动时触发，消耗内存比较厉害。移动元素的思路就是，在移动过程中不断地记录元素的位置，也就是当前元素位置，通过  当前鼠标位置-开始鼠标位置+开始元素位置  这个公式计算得出。这里需要注意的是，处理好模态框移动过程中越界的情况，不能超出可见区域的边界，至少不能是整个荧幕的边界，故需要加入判断。左右上下越界分别要判断。

mouseup：鼠标抬起时触发事件。

此处遇到坑，此处执行的逻辑应该是解绑按下和移动事件，但是解绑在这里时无效的，因此，加入一个移动标记，当鼠标按下时移动标记为true，抬起时为false。

5、支持记录上次弹出位置

下次弹出时，弹出到上次关闭时的位置。

6、可设置模态框位置

加入left和top的属性。