随想
回想自己转为前段以来正是MVVM兴起的时代，jq使用的机会已经很少了，原生js使用的次数也变得少了很多，尽管ES6与ts提供了很多强大的功能，但在前段路上也害怕自己追逐新兴技术而迷失了作为一个程序来说更重要的东西，而前端又是一个不得不去学习层出不穷的新技术所带来的思想，由于自身工作以ng2为主，因此想以阿里团队zorro为例，从易到难逐步学习阿里大牛们编写组件的思路以及ng2中所不了解的用法，从此开始每日记录学习历程。
阅读思路
由单独模块到组件，由组件属性到行为，然后分析组件间的联系，理解组件抽象方式等。
一. ngModule
模块中未引入自定义编写的模块
二.核心类
红色框框为陌生内容
1. ViewEncapsulation(视图包装):
如何封装组件独立样式域
Emulated：不使用shadow Dom封装样式，而使用angular提供的机制封装了组件样式，确保不受外界样式影响，同种黄色部分为angular为组件做的特定标示，通过该标示达到组件样式独立效果
Native：使用shadow Dom技术为组件创建ShadowRoot，实现组件样式独立
None：不为组件提供任何模板或者样式封装
2.ElementRef
组件根DOM元素(selector)的引用，官方建议不直接使用该类的对象操作DOM，因为会存在安全问题.
官方提供了安全使用ElementRef方式，通过Renderer API来渲染ElementRef的操作
注： Angular 4.x+ 版本中Render被替换为Render2
3.Render2
图中为Render2抽象类部分方法，内部包含基本DOM操作，组件内部就是通过该类的render实例服务来对button宿主元素进行渲染的
三.component
一个组件无外乎由样式与事件组成，而一个自定义的组件自然会需要很多@input来保证自定义，其中主要包含样色形状大小等等，这里不多赘述，只记录一些关键点
3.1 组件模板
selector本应为组件标签，但使用[]括住以后便可作为属性使用(类似于angularjs中属性指令),模板中ng-content表示组件selector内部标签在组件中所在位置，根据zorro官网loading使用方式可以看出button内部标签所在位置即为ng-content的位置，li为loading效果
3.2 事件
@HostListener用于为组件宿主元素添加事件，这里通过延时实现了点击晃动效果
3.3 特殊方法
图中为button的样式渲染方法，_classList为样式缓存数组，每当更新样式时会先清空所有样式，然后更新_classList，再次更新样式
