超级会员免费看
本文介绍如何在Angular中创建一个图片点击缩放组件，包括需求分析、库创建、样式设计、参数接口设定、主程序实现及完整代码展示。组件名为ngx-imgclicker，支持双击放大、移动和缩放图片，具有良好的复用性。
Angular实现图片点击缩放组件
本文将设计一个用于网页中点击图片缩放的 Angular 组件。阅读需要注意的是，本文只讲解原理和设计理念，不过多讲解Angular框架的API。
线demo。
需求分析
一般用户在阅读文章的时候，由于种种限制，图片会比较小，所以需要提供一个可以查看图片详细的控件，大概需求可以有以下几点：
- 双击图像可以显示该图像的原始图或者放大后的图像
- 图像可以移动，放大，缩小。
- 再次双击后可以关闭
- 自定义API参数（有一些图像的api支持图像的裁剪缩放等功能）
- 复用性好，也就是在每个页面中都可以使用。
那么我们暂时就按照这个需求来设计，首先要给它起一个名字，这样它才有生命力。
就是它了 ngx-imgclicker ！！！
创建Angular自定义库
创建Angular自定义库
订阅专栏 解锁全文
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
