Angular4自定义组件及数据绑定--（进度条）

        初学Angular4的时候，发现跟AngularJs（Angular1.x）有很大的不一样的，继承了Java类的思想，摒弃了JS，采用Typescript，用起来感觉轻量很多。结合Ionic3进行项目开发，组件性强，开发效率得到了大大的提高。

        根据项目功能的开发需要，需要做一个进度条。根据Angular的特性，写了一个组件，利用@Input()的特性做数据的双向绑定，对数据进行互传，应用在项目中。

一、创建Ionic3 component 组件

（1）执行Ionic g component progress-bar,执行成功后，会发现目录下的components中生成了progress-bar的文件夹。

（2）组件HTML代码的编写，如下progress-bar.html。

（3）组件的数据交互，通过@Input()，来实现数据交互，如下progress-bar.ts。

（4）组件样式的实现,如下progress-bar.css。

分别完成了progress-bar.html、progress-bar.ts、progress-bar.css后，组件就创建完毕了。

二、使用Ionic3component progress-bas组件

（1）将上面步骤创建的component progress-bas组件，引入到app.module.ts。

导入之后，才可以在html页面里面使用该组件。

（2）在需要使用该组件的html页面，进行使用。

（3）到这里了，该组件就已经完成创建和使用啦！如下就是该组件完成后的效果图。

        在创建这个组件的时候只用到了@Input()，@Input()是父组件将数据传递给子组件。还有一个属性是@Output()，它是子组件传递数据给父组件。结合@Input()和@Output()属性，就可以编写子组件与父组件的双向数据交互了。