【Angular系列】2. 自定义button按钮组件

上一篇文章已经搭建好了angular sample框架以及包含主题的组件库，这一篇开始自定义组件，第一个组件button，想一下按钮的功能很简单，即点击事件，多思考一下，还包括大小、颜色（主题控制），hover效果等。

1. 添加button组件：lib下面每个组件分开一个文件夹，这样方便管理，外部引入库组件也方便。

2. _button-theme.scss这个主题文件需要import到all theme文件中去，这样才能使用我们的主题色。

3. 我们在button.ts里面定义@Input()来接收按钮大小和颜色，xSize和xColor，这里可以预定义几个通用的值，就是比较常用的值先预定义，剩下的放开，外部传入即可。

4. 接下来传入的值我们通过Renderer2这个core里面提供的功能来设置到按钮对应元素上去。

5. 最后我们的button.html很简单，一个span里面包了一个ng-content，也就是说我们的按钮不光是文字，也可以自定义icon，图片等内容。这里有一个地方需要注意，我们在传入颜色的时候传入的primary、accent和warn这几个angular material定义的标准颜色，必须要转换为具体的颜色然后赋值到css中去，所以我们写了一个mixin和ngClass来控制一下，如下图：

6. 这样button基本完成，接下来我们在angular sample里面写一个使用的样例：这样不同的预定义主题下面的按钮都有了，你也可以自己定义custom的主题，如果觉得预定义主题不好看的话。

这样，我们的按钮组件就初步完成了，在写项目组件的时候可以先考虑通用的用的比较多的功能，后面慢慢的逐步补全即可。

github地址：https://github.com/KevinZhang19870314/quick-pai/tree/master/projects/x-controls/src/lib/button

在线Demo地址： https://stackblitz.com/edit/x-button?embed=1&file=src/app/app.component.ts