zxz414644665的专栏

这篇我们自定义tabs组件，支持自定义主题色，动态增减隐藏tab，动态选择tab，禁用tab，自定义tab头部等。1. 第一步同样是新增一个tabs文件夹，新增相应的文件如下：tabs和tab两个组件，同时添加一个tabheader指令。2. tabs组件定义如下：可选主题颜色xColor，可选tab顺序号（xSelectedIndex和xSelectedIndexChange，这样就...

Angularjs的项目一般用js比较多，使用的是js + less/css+ html模式，那么如何将这里的js转换为ts写法，使之能够支持es5 & es6语法，支持强类型语法提示及提高开发效率、容错等。下面一一道来：1. 首先在项目根目录添加一个tsconfig.json文件，这个文件即为ts的配置文件，然后npm按照typescript及相关@type类型定义。{ ...

前面一篇文章说了如果将已有的js切换到ts，这篇文章会说项目中如果来了新的需求，如何用ts写新增的需求。我们还是以ts & html & less为结构，如下：比如这次我们做活动案例添加了一个component组件，这里稍微说一下，最好都用component不要用controller，component复用性比较强且angular 2 +以后都是用的component，如果，我...

从官方给的升级例子https://angular.io/guide/upgrade#phonecat-upgrade-tutorial以及结合我们的项目，总结一下目前为止升级的一些步骤和经验，目前可以通过angular2+的入口bootstrap，也就是说是一个hybird的application，下面按照步骤：js转ts：这个参考我前面的文章，这2个文档详细介绍了如何切换以及一些示例，这...

本期为Angular系列的第一篇文章，我会从这里搭建Angular sample项目、组件库、主题、然后每个组件等。使之成为一个比较通用的组件库系列文章，目的有二：1、自己在写系列文章过程中不断夯实基础、不断学习补缺；2、分享给一些不熟悉angular及自定义组件的同学，使之快速上手并提高。1. 使用Angular CLI命令行工具生成一个Angular sample的项目：这里添加了一个op...

上一篇文章已经搭建好了angular sample框架以及包含主题的组件库，这一篇开始自定义组件，第一个组件button，想一下按钮的功能很简单，即点击事件，多思考一下，还包括大小、颜色（主题控制），hover效果等。1. 添加button组件：lib下面每个组件分开一个文件夹，这样方便管理，外部引入库组件也方便。2._button-theme.scss这个主题文件需要import到...

上一篇中讲了button组件的编写，这篇说一下checkbox组件 --- 多选框，可以勾选、取消勾选，禁用，支持NgModel、reactive forms，支持勾选事件监听等。1. 和button一样，新建一个checkbox文件夹，添加相应的文件如下：2. 添加color，是否勾选，disabled等input属性，因为我们都使用了color属性，所以之前写在button里面控制...

前面一篇我们自定义了checkbox组件，然后顺便把通用mixin写上了，而且实现了checkbox组件的NgModel和Reactive forms两种绑定。这一篇我们继续来自定义radio-button组件，这个组件和checkbox比较类似，只不过这个是一组单选框，即在一个radio button group里面的若干个radio button是互斥了，只能选择其中的某一个，这个是主逻辑，然...

这篇我们自定义input输入框组件，同样支持NgModel和reactive forms，支持验证自定义message提醒，支持浮动label，支持自定义主题色等。1. 第一步同样是新增一个input文件夹，新增相应的文件如下：2. 定义input组件的输入输出：3. 实现ControlValueAccessor，对NgModel和Reactive forms的支持：4...