本文集中讲讲笔者目前使用ng2来开发项目时对其组件的使用的个人的一些拙劣的经验。

先简单讲讲从ng1到ng2框架下组件的职责与地位：

ng1中的一大特色——指令，分为属性型、标签型、css类型和注释型。其中写在css类以及注释中的组件想必多数人都不会去使用，而属性型指令与标签型指令则是ng1火遍宇宙的功臣之一。在ng2中，标签型指令干脆被分离出来，追随vue等新兴势力的风格升级并称为组件，并用来处理所有与视图（DOM）打交道的事情，包括展示数据与动画。而属性型指令则用于完善组件的功能，比如接收用户输入、响应用户点击等事件。其实ng2中内嵌的许多功能都是属性型指令——ngFor、ngIf等等，而对于组件来说比较依赖具体的项目，所以跟适合基于项目来使用组件写出一个个用户看得见的界面来。同时组件还需要与路由打交道，前端路由可以看成是动态更改DOM，在ng2路由中制定好规则后，其实就是在动态渲染或销毁不同的组件，以此实现前端页面的切换。

然后讲讲笔者前面的项目时如何使用ng2组件搭起一个网站的：

1. 照着官方的做法，每个应用得有一个根组件。

2. 区分前端路由，每个路由条目指向一个组件，每个组件各自渲染一个页面。

3. 项目扩大，单模块不能满足业务分类，所以先由根路由引导懒加载各个子模块，然后由子模块的子路由各自指向具体的子组件，并渲染各自的页面。

4. 着眼单个子组件渲染的单个页面，其实可以将一些可重用的标签块封装到一个新的组件里（比如需要ngFor遍历的复杂数据项）。

5. 发现其实有一些组件（比如侧边按钮或消息模态框）其实整个项目都可能使用到，得把这些封装*局共享的组件。

到现在自己都觉得有一点乱，究其原因，应该是组件这个名称的问题，因为在ng2框架下，大到路由页面小到数据条目全都用的组件，声明方式全都一个模样，难免会乱。

没办法只能自己来给组件继续细分类别了，笔者于是把ng2的组件分成了四类：

页面组件

• 与路由打交道，只关心匹配路由规则渲染界面，此类组件在声明时不需要 selector 参数（只由路由定位不需要具体标签）
• 接收路由参数或resolve数据，尽量不做其他业务交互的请求，且不设Input、Output变量

布局组件

• 用于细分页面的模块若页面较简单可以省去直接使用单位组件，必须有具体的selector参数因为要在页面组件中使用
• 不负责获取路由或resolve数据，且尽量不请求数据而通过Input传入数据或Output响应事件，所有业务交互请求尽量在布局组件中完成（不至于像放在页面组件中那么乱，且各布局组件可以做到互不影响）

单位组件

• 必须有自己的selector，一般在自己模块中可重用，通过各种属性型指令修饰自身
• 用于简化单位级别的重复标签，比如获取的列表数据中的每个数据项的界面展示就可以封装成一个单位组件
• 只负责通过Input传入数据并显示，以及通过Output响应事件到外层的布局组件或页面组件中处理

共享组件

• 必须有selector，整个项目都共享的组件，实现比较自由，重在减少整个项目的重复代码并方便维护
• 比较合适的比如消息弹框，加载进度条等
• 大部分的属性型指令，其实功能一般都比较通用，可以与共享组件等同对待，只不过共享组件拥有具体视图而共享指令只用于实现通用功能

如果纯文字不够形象，笔者再给出自己画的简易版ng2超级无敌前端架构图：

讲来讲去其实这里面完全没有技术难点，只是在暗示着一件事——项目目录安排很重要。

ng2可不认识笔者给它细分的这么多类型的组件，这些分类是给自己看的，具体的体现就是以这个分类体系得出的一个项目目录结构。

以笔者自己在写的一个项目为例：

笔者给文件夹命名前面有的加上了加号有的加上了减号，也算是自己的一种看似奇怪的目录结构安排了。

解释一下就是：最外层这个+term代表整个懒加载模块的目录，里面带加号的目录下的组件代表是页面组件，什么符号都没有的代表是布局组件，带减号的目录下的组件代表是单位组件，单位组件可能在整个懒加载模块中都使用到，所以直接在懒加载目录的最外层，而布局组件都在具体的页面组件同级目录下。

总结就是抛开ES6与TypeScript的外表后ng2组件的使用在技术上难点不算多，本文纯粹是一点拙劣的经验之谈，当然笔者目前的经验还远远不足，希望在日后的开发以致研究透彻ng2源码后能有更深的见解。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# angular  # 组件  # Angular2入门教程之模块和组件详解  # Angular入口组件（entry component）与声明式组件的区别详解  # 加载  # 自己的  # 上了  # 不需要  # 目录下  # 都是  # 成了  # 最外层  # 放在  # 都不  # 都在  # 则是  # 都没  # 这么多  # 遍历  # 要在  # 经验之谈  # 一大  # 没办法  # 对其 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 常州企业网站制作公司,全国继续教育网怎么登录？  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界？  如何挑选优质建站一级代理提升网站排名？  Firefox Developer Edition开发者版本入口  惠州网站建设制作推广,惠州市华视达文化传媒有限公司怎么样？  网站制作壁纸教程视频,电脑壁纸网站？  laravel怎么通过契约（Contracts）编程_laravel契约（Contracts）编程方法  Laravel如何使用Laravel Vite编译前端_Laravel10以上版本前端静态资源管理【教程】  Laravel如何使用Sanctum进行API认证？（SPA实战）  Laravel怎么生成二维码图片_Laravel集成Simple-QrCode扩展包与参数设置【实战】  合肥制作网站的公司有哪些,合肥聚美网络科技有限公司介绍？  Laravel怎么配置.env环境变量_Laravel生产环境敏感数据保护与读取【方法】  Laravel Blade模板引擎语法_Laravel Blade布局继承用法  Laravel如何自定义分页视图？（Pagination示例）  Laravel如何实现API版本控制_Laravel API版本化路由设计策略  如何正确选择百度移动适配建站域名？  黑客如何利用漏洞与弱口令入侵网站服务器？  宙斯浏览器文件分类查看教程 快速筛选视频文档与图片方法  laravel怎么使用数据库工厂（Factory）生成带有关联模型的数据_laravel Factory生成关联数据方法  Laravel Session怎么存储_Laravel Session驱动配置详解  Laravel如何生成API文档？（Swagger/OpenAPI教程）  浏览器如何快速切换搜索引擎_在地址栏使用不同搜索引擎【搜索】  装修招标网站设计制作流程,装修招标流程？  网站建设整体流程解析，建站其实很容易！  Angular 表单中正确绑定输入值以确保提交与验证正常工作  在线ppt制作网站有哪些软件,如何把网页的内容做成ppt？  Laravel如何安装Breeze扩展包_Laravel用户注册登录功能快速实现【流程】  怎么用AI帮你设计一套个性化的手机App图标？  Laravel如何保护应用免受CSRF攻击？（原理和示例）  成都品牌网站制作公司,成都营业执照年报网上怎么办理？  Laravel如何优雅地处理服务层_在Laravel中使用Service层和Repository层  Laravel中的Facade(门面)到底是什么原理  高端智能建站公司优选：品牌定制与SEO优化一站式服务  Laravel怎么返回JSON格式数据_Laravel API资源Response响应格式化【技巧】  Laravel怎么连接多个数据库_Laravel多数据库连接配置  Windows10如何更改计算机工作组_Win10系统属性修改Workgroup  如何在Ubuntu系统下快速搭建WordPress个人网站？  微信小程序 wx.uploadFile无法上传解决办法  PHP 实现电台节目表的智能时间匹配与今日/明日轮播逻辑  如何生成腾讯云建站专用兑换码？  悟空浏览器如何设置小说背景色_悟空浏览器背景色设置【方法】  如何选择可靠的免备案建站服务器？  Laravel如何使用Socialite实现第三方登录？（微信/GitHub示例）  如何快速搭建高效香港服务器网站？  大型企业网站制作流程,做网站需要注册公司吗？  为什么要用作用域操作符_php中访问类常量与静态属性的优势【解答】  香港网站服务器数量如何影响SEO优化效果？  清除minerd进程的简单方法  手机网站制作与建设方案,手机网站如何建设？  如何在香港服务器上快速搭建免备案网站？