189 8069 5689
本文集中讲讲笔者目前使用ng2来开发项目时对其组件的使用的个人的一些拙劣的经验。
先简单讲讲从ng1到ng2框架下组件的职责与地位：
ng1中的一大特色——指令，分为属性型、标签型、css类型和注释型。其中写在css类以及注释中的组件想必多数人都不会去使用，而属性型指令与标签型指令则是ng1火遍宇宙的功臣之一。在ng2中，标签型指令干脆被分离出来，追随vue等新兴势力的风格升级并称为组件，并用来处理所有与视图（DOM）打交道的事情，包括展示数据与动画。而属性型指令则用于完善组件的功能，比如接收用户输入、响应用户点击等事件。其实ng2中内嵌的许多功能都是属性型指令——ngFor、ngIf等等，而对于组件来说比较依赖具体的项目，所以跟适合基于项目来使用组件写出一个个用户看得见的界面来。同时组件还需要与路由打交道，前端路由可以看成是动态更改DOM，在ng2路由中制定好规则后，其实就是在动态渲染或销毁不同的组件，以此实现前端页面的切换。
然后讲讲笔者前面的项目时如何使用ng2组件搭起一个网站的：
1. 照着官方的做法，每个应用得有一个根组件。
2. 区分前端路由，每个路由条目指向一个组件，每个组件各自渲染一个页面。
3. 项目扩大，单模块不能满足业务分类，所以先由根路由引导懒加载各个子模块，然后由子模块的子路由各自指向具体的子组件，并渲染各自的页面。
4. 着眼单个子组件渲染的单个页面，其实可以将一些可重用的标签块封装到一个新的组件里（比如需要ngFor遍历的复杂数据项）。
5. 发现其实有一些组件（比如侧边按钮或消息模态框）其实整个项目都可能使用到，得把这些封装成全局共享的组件。
到现在自己都觉得有一点乱，究其原因，应该是组件这个名称的问题，因为在ng2框架下，大到路由页面小到数据条目全都用的组件，声明方式全都一个模样，难免会乱。
没办法只能自己来给组件继续细分类别了，笔者于是把ng2的组件分成了四类：
页面组件
布局组件
单位组件
共享组件
如果纯文字不够形象，笔者再给出自己画的简易版ng2超级无敌前端架构图：
讲来讲去其实这里面完全没有技术难点，只是在暗示着一件事——项目目录安排很重要。
ng2可不认识笔者给它细分的这么多类型的组件，这些分类是给自己看的，具体的体现就是以这个分类体系得出的一个项目目录结构。
以笔者自己在写的一个项目为例：
笔者给文件夹命名前面有的加上了加号有的加上了减号，也算是自己的一种看似奇怪的目录结构安排了。
解释一下就是：最外层这个+term代表整个懒加载模块的目录，里面带加号的目录下的组件代表是页面组件，什么符号都没有的代表是布局组件，带减号的目录下的组件代表是单位组件，单位组件可能在整个懒加载模块中都使用到，所以直接在懒加载目录的最外层，而布局组件都在具体的页面组件同级目录下。
总结就是抛开ES6与TypeScript的外表后ng2组件的使用在技术上难点不算多，本文纯粹是一点拙劣的经验之谈，当然笔者目前的经验还远远不足，希望在日后的开发以致研究透彻ng2源码后能有更深的见解。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持创新互联建站！
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、建站服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。