Angular 4 自定义组件封装碰见的一些事儿

你用Angular 吗？

一.介绍

    说说封装Angular 组建过程当中碰见的一些问题和感悟。用久了Angular,就会碰见不少坑，许多基于Angular开发的框架最喜欢作的事情就是封装组件，而后复用.....由于这是最省事的。

二.基本构建组件思想

界面构建草图

  简要介绍上图：

    1.View 就是咱们须要完成的界面，可是界面无非就是由若干个label,button,table,img,list等一些基本控件构成的，全部的前端页面构成都是同样，只是加上CSS排版肯定最后的显示效果。

    2.五种基类，其实不止五种，只是列举。这里就须要咱们将基类都封装成组件的形式，对外提供组件标签就可使用。无论构建多少个页面，均可以用这几个基本组件完成。

  eg：一个button组件

button.component.html

  这个Button组件里面是还包裹一个label组件的。

button.component.ts

  对外只用提供选择器，就可使用Button了。

3.但是为何还要有中间的UIbuileder呢？

是这样的，每次引选择器名是否是也很麻烦，看起来没有省力多少，

封装的基本组件只须要对外抛出一个TYPEID，UIbuilder只要知道1是表明button组件，2表明label组件，UIbuilder将组件构建出来。

UIBuilder.html 构建组建图

  VIEW界面须要Button给我传一个1，须要label传一个2，须要什么传对于的id就行。此时的界面和组件是彻底分离的，这样构件界面的时候几乎能够没有代码就出来一个页面啦。并且下次用的时候，基类是彻底不用动的。

三.样式控制。

也许你会以为这样构件出来的只有最简单的页面，那么样式呢？

的确呀，这样就是很老土的界面，那么样式要怎么实现呢？

其实Angular 提供了不少的方法的。

1.一张样式表，定义全部的样式。至关于boostrap同样。

button样式定义

  都知道{{}}的定义，你只要在最外面将你须要的样式名传进来就能够啦。

2.代码修改样式

  ElementRef ，Renderer2  有多少人知道这两个属性的。

代码修改样式

    这种都是能够在外部修改样式的，你的基组件不须要改动。

    可能看起来费劲，但用起来好处不少，不用copy，copy了，并且你的思想也会到一个新的境界。

  其实，我用Angular有一段时间了，若是你也是，欢迎来交流。